What is the best way to ensure that my variables are properly differentiated in order to prevent Angular --prod --aot from causing empty values at runtime?

While testing my code locally in production, the functions I've written are returning the expected values when two parameters are passed in.

However, after running ng build --prod --aot, the variable name within the functions changes from name to t. This results in one function returning a result while the other function returns nothing.

I have attempted to rename the function parameters both in the Angular template and inside the component.ts file.

Below are the original functions I wrote:

submitContact(name,email,subject,message){
  const callable = this.fun.httpsCallable('contactEmail')
  callable({
    name:name,
    email:email,
    subject:subject,
    message:message
  }).subscribe()
  console.log(name,email,subject,message)
  alert("Thanks for your message")
}
submitForm(fullname,emailaddress){
  const callable = this.fun.httpsCallable('genericEmail')
  callable({
    name:fullname,
    email:emailaddress
  }).subscribe()
  alert("Thanks for signing up!")
  console.log(fullname,emailaddress)

}

This is the code that is produced after running ng build --prod --aot:

t.prototype.submitForm = function(t, e) {
            this.fun.httpsCallable("genericEmail")({
                name: t,
                email: e
            }).subscribe(),
            alert("Thanks for signing up!"),
            console.log(t, e)
        }

        t.prototype.submitContact = function(t, e, n, r) {
            this.fun.httpsCallable("contactEmail")({
                name: t,
                email: e,
                subject: n,
                message: r
            }).subscribe(),
            console.log(t, e, n, r),
            alert("Thanks for your message")
        }

Although I would expect both functions to display results in the console, only submitcontact does.

Furthermore, when submitcontact is executed, I receive the following error message:

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
at Object.t.messageJumpContext (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:9921)
at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:8583

Despite the error message, the result still displays. I am unsure of what needs to be adjusted to get both functions to produce results consistently.

Answer №1

Try this:

ng serve --aot --prod --optimization=false

This command will turn off minification in the build process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if the specified key is present in the type parameter and if it corresponds to the expected data type in the value parameter

I have a specific goal in mind: export interface GCLPluginConfig { [key: string]: string | number | boolean | Date | string[]; } export interface CorePluginConfig extends GCLPluginConfig { "core.lastUpdateCheck": Date; } export interface An ...

Error message: WebStorm shows that the argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type<any> | "root" | null} and InjectableProvider

Transitioning my app from Angular v5 to v6 has presented me with a TypeScript error when trying to define providedIn in my providers. The argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type | "root" | null} & ...

Issue with Rxjs switchMap function not correctly executing the provided function

Currently utilizing the Subject observable provided by rxjs. In my component, I have implemented two methods. Search search(terms: Observable<string>) { return terms.pipe( debounceTime(400), distinctUntilChanged(), switchMap(term => ...

Angular Dependency Injection: Individual instances of each service are provided for every module usage

Within my application, there is a module called "FileUpload". The upload service included is "UploadService", which receives a service injection with the interface "RequestService." I also have two other modules: FileManager1 and FileManager2. Each file m ...

What is the best approach to managing exceptions consistently across all Angular 2/ Typescript observables?

Throughout the learning process of Angular2, I have noticed that exceptions are often caught right at the point of the call. For example: getHeroes(): Promise<Hero[]> { return this.http.get(this.heroesUrl) .toPromise() ...

The error message indicates a compatibility issue between parameters 'r' and 'a'

Attempting to reproduce the code found in this blog post, but encountering some perplexing errors. import { option, identity, apply } from 'fp-ts'; import type { Kind, URIS } from 'fp-ts/HKT'; import { pipe } from 'fp-ts/lib/functi ...

What is the correct way to handle Vue props that include a dash in their name?

I am currently working on a project using Vue. Following the guidelines of eslint, I am restricted from naming props in camel case. If I try to do so, it triggers a warning saying Attribute ':clientId' must be hyphenated. eslint vue/attribute-hyp ...

Issue with drag and drop functionality in Angular 13 when using ngFor with a JSON array

Embarking on my inaugural endeavor with Angular material CDK drag and drop for one of my user stories. I'm puzzled as to why an array of objects is not functioning properly in cdk drag and drop Error message: Argument of type 'CdkDragDrop<{ ...

Utilizing Glassfish Application Server and MSSQL Database for Angular Front-End Authentication in Jakarta

Embarking on my journey in the realm of web development, I am eager to implement authentication for my full-stack application. Armed with Angular 13 on the front end, Jakarta 9 running on Glassfish app server, and MSSQL database, I find myself at a loss on ...

Verify if the array entries match

Within my select element, I populate options based on an array of values. For example: [{ name: 'A', type: 'a', }, { name: 'B', type: 'b', }, { name: 'B', type: 'b', }, { name: &apos ...

Tips for effectively managing asynchronous tasks

I keep getting different numbers every time my code runs. Can you tell me if I'm doing this the right way? Here's the code: export class GetPlanetsService { url='https://swapi.co/api/planets/?page='; planets:Planet[]=[]; headers: ...

The type 'undefined' cannot be assigned to a different type within the map() function, resulting in a loss of type information

I am facing an issue in my redux toolkit where an action is trying to set some state. Below is the relevant code snippet: interfaces export interface ProposalTag { id: number; name: string; hex: string; color: string; } export interface ProposalS ...

Steps for creating user accounts and saving user information in Firebase's Real Time Database

Can someone please guide me on how to register a user in Firebase and save their additional details such as first name, last name, etc.? I have created a standard registration form in Angular and successfully registered users with their username and pass ...

Sharing an angular app URL containing query parameters with multiple users

I am in need of a feature that allows me to transfer the filter settings on a page to another user. For instance, if I apply certain filters on a specific page, I would like to share the URL with those filters already applied to other users. ...

Is it necessary to manually unsubscribe from observables in the main Angular component?

I'm facing a dilemma with my Observable in the root Angular (6.x) component, AppComponent. Typically, I would unsubscribe from any open Subscription when calling destroy() using the lifecycle hook, ngOnDestroy. However, since the AppComponent serv ...

Submit information by utilizing' content-type': 'application/x-www-form-urlencoded' and 'key': 'key'

Attempting to send data to the server with a content-type of 'application/xwww-form-urlencode' is resulting in a failure due to the content type being changed to application/json. var headers= { 'content-type': 'applica ...

LocalStorage in Angular application failing to function in Android web view

Working with Angular 4, I've developed a web application that stores the user security token in localStorage after login. The application uses this localStorage value to control the visibility of certain links, such as hiding the login button once th ...

Angular 2 RC 4's ViewUtils provider offers a range of functionalities for optimizing views

Is there a way to dynamically load a child component in a parent view? this.viewAddedSubscription = viewManager.viewAdded.subscribe((view) => { let injector = ReflectiveInjector.resolveAndCreate([new Provider('view', { useValue: view })] ...

Issue accessing page from side menu in Ionic 2 application

I am experiencing an issue where the page does not open when I click on it in the side menu. Here is my app.component.ts file: this.pages = [ { title: 'NFC Page', component: NfcPage, note: 'NFC Page' }, ...

Developing Angular components with nested routes and navigation menu

I have a unique application structure with different modules: /app /core /admin /authentication /wst The admin module is quite complex, featuring a sidebar, while the authentication module is simple with just a login screen. I want to dyn ...