The evaluation of the Angular getter takes place prior to the constructor being executed

  constructor(
    private readonly authService: SocialAuthService,
    private readonly authS: AuthService,
    private readonly loginS: LoginService,
    private readonly router: Router,
    private readonly formBuilder: FormBuilder,
  ) {
    alert('c');
  }
  get foo() {
    alert('foo');
    return;
  }

alert('foo') occurs before alert('c'). I am not using foo in my template. How is this even possible?

Click here for the video.

The video link above contains the code base that cannot be copied/pasted entirely.

Answer №1

I can confirm that this scenario does not occur. Feel free to check out a stackblitz demonstration of the issue:

https://stackblitz.com/edit/angular-ivy-jbnmt8

If the function foo is being activated unexpectedly, there must be an underlying cause. Kindly provide your concise and reproducible code sample. The community is ready to offer assistance.

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

What is the process of personalizing a DaisyUI theme in Tailwind with TypeScript?

I am trying to tailor an existing DaisyUI theme using my tailwind.config.ts file for my Next.js project. Although the DaisyUI documentation only provides examples in JavaScript (text), I want to customize it within my TypeScript environment. Below is a s ...

Utilizing ag-grid with Vue.js: Implementing TypeScript to access parent grid methods within a renderer

I've integrated ag-grid into my project and added a custom cell renderer: https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-vuejs-components Although the renderer is working well, I'm facing an issue whe ...

The functionality of Angular 6 Material Nested Tree is disrupted when attempting to use dynamic data

In Angular 6, I am utilizing mat-tree along with mat-nested-tree-node. My objective is to dynamically load the data when the user toggles the expand icon. Attempting to apply the dynamic data concept from the Flat Tree example provided in Material Example ...

Interacting between Angular Child and Parent components

I am facing an issue where I am trying to emit an event from a child component and display it in the parent HTML, but it doesn't seem to be working. Below is my code: ParentComponent.ts @Component({ selector: 'app-parent', templateUrl: ...

What is the process for creating a nullable column in TypeORM?

Within my User entity, there is an optional column for the user's avatar image: @Entity() export class User { @PrimaryGeneratedColumn('uuid') id: string @Column({ unique: true }) email: string @Column({ unique: true }) ...

The behavior of the dynamically generated object array differs from that of a fixed test object array

I'm facing an issue while trying to convert JSON data into an Excel sheet using the 'xlsx' library. Everything works perfectly when I use test data: //outputs excel file correctly with data var excelData = [{ test: 'test', test2: ...

What is the validity of using Promise.reject().catch(() => 5) in Typescript?

Can you explain why the TS compiler is not flagging an error for this specific code snippet? Promise.reject().catch(() => 5) Upon inspecting the definition of the handler function within the catch, we come across the following code: interface Promise&l ...

How to remove the border of the MUI Select Component in React JS after it has been clicked on

I am struggling to find the proper CSS code to remove the blue border from Select in MUI after clicking on it. Even though I managed to remove the default border, the blue one still persists as shown in this sandbox example (https://codesandbox.io/s/autumn ...

Can a function interface be implemented in TypeScript successfully?

I am interested in implementing this functionality: class MyFunc extends ((s: string) => boolean) { ... } This would allow an instance of MyFunc to act as a function that takes a string input and returns a boolean value, like so: const f = new MyFunc ...

Unable to configure unit tests for Vue project using Typescript due to TypeError: Unable to destructure property `polyfills` of 'undefined' or 'null'

I've been working on adding unit tests for an existing Vue project that uses Typescript. I followed the guidelines provided by vue-test-utils for using Typescript, but when I ran the test, I encountered an error message stating: TypeError: Cannot d ...

Issue with HttpClient causing malfunction

I'm currently using Angular 4 and have decided to transition to using HttpClient. However, I've encountered a JSON parsing error that has proven quite challenging to fix despite extensive research. Previous Method import { Injectable } from &ap ...

Anticipate an asynchronous function causing an error in a Jest test scenario

If I were to play around and execute the code snippet below: await expect(async () => { const asyncFunc = async () => { return Promise.reject(new Error('Foo')) }; await asyncFunc(); }).toThrow(); I assumed ...

Passing data between components in Angular 5

Is it possible to declare a shared variable in both components and ensure that they have the same values? A.html ... <button (click)="sendInfo(a,b,c)" > </button> ... B.html ... <div *ngIf="showData" > {{loadData()}} </div> ... ...

Filtering a Table with Angular Material: Using multiple filters and filter values simultaneously

Looking to implement dual filters for a table of objects, one being text-based and the other checkbox-based. The text filter works fine, but struggling with the checkbox filter labeled "Level 1", "Level 2", etc. Ideally, when a checkbox is checked, it shou ...

Retrieving data from Node.js within an Angular application

I am currently working on retrieving data from MongoDB and displaying it on my website. However, I am facing an issue in sending the entire fetched object to a specific port (the response) so that I can retrieve it from Angular. I also need to know how to ...

What is the best way to implement a scrollbar in my Angular dialog box?

When it comes to opening a dialog window, I am using the following function: doOutput(){ this.dialog.open(NgxChartsComponent ) ; } Within the HTML code of my NgxChartsComponent, you will find: <!-- Insert the specific chart type here --> ...

Pinia is having trouble importing the named export 'computed' from a non-ECMAScript module. Only the default export is accessible in this case

Having trouble using Pinia in Nuxt 2.15.8 and Vue 2.7.10 with Typescript. I've tried numerous methods and installed various dependencies, but nothing seems to work. After exhausting all options, I even had to restart my main folders on GitHub. The dep ...

Managing errors in ErrorHandler and addressing them in HttpInterceptor

Can you explain the difference between error handling methods in Angular 7? Is it necessary to handle global errors in HttpInterceptor and also in Angular's built-in ErrorHandler? In the HttpInterceptor, what types of errors can be handled, and in the ...

Trigger an event in Angular using TypeScript when a key is pressed

Is it possible to activate a function when the user presses the / key in Angular directly from the keydown event? <div (keydown.\)="alerting()"> </div> <div (keydown.+)="alerting()"> </div> Both of these ...

Exploring Angular 2 MVC for debugging JavaScript

I'm currently troubleshooting my main controller, but I can't seem to find it in the dev tools along with my service. Is there a way for me to debug my JavaScript files without using TypeScript? Below is an image of my project structure which I s ...