1

I am a complete beginner to Angular and have only been coding for about 2 years or less. I'm building a to-do list app to learn Angular. Currently, I am creating a form (login) and following the documentation. Unfortunately when I revise app.component.html with the form's HTML, I get ERROR RangeError: Maximum call stack size exceeded. Not sure why I am getting this error. I've searched the forums and the only I possibility I've seen is that maybe I have an infinite loop, although I don't see how that's possible considering that I haven't implemented any loops in the code. I see someone else had this question but it was never answered. Any help would be greatly appreciated.

See code below or check my GitHub. https://github.com/bbrawley/TodoListAppAngular/commit/fb06053e889d99be10583d75012031806ede7e04

Same question that was never answered - RangeError: Maximum call stack size exceeded ERROR after I tried to use a selector tag in app component ANGULAR 4 & TypeScript

user.ts

export class User {

    constructor(
        public username: string,
        public password: string
    ) {
        let user = new User('aaa',
            'a');
        console.log('My username is ' + user.username);
    }
}

login-form.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../user';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent  {

  model = new User('Tester1', '12345');

  submitted = false;

  onSubmit() { this.submitted = true; }

  // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-login-form></app-login-form>

The code breaks when the line above is entered.

1
  • I just wanted to add my own situation which may help someone else... I was getting the same error and it turned out that I had named my selector for my nav component "nav" but my html code used a nav tag as well for the bootstrap markup. This led to an unintentional loop. Once I renamed my selector the problem disappeared Jan 28, 2020 at 10:12

2 Answers 2

2

The problem is in User class.

export class User {

    constructor(
        public username: string,
        public password: string
    ) {
        //this is where user constructor is getting called
        let user = new User('aaa', 'a');
        console.log('My username is ' + user.username);
    }
}

You are basically creating a new instance of User class inside its own constructor.

This causes a cyclic process of calling User constructor and creating User instance which ends up crashing the angular app with ERROR RangeError: Maximum call stack size exceeded [Angular] error!

Sample Code

class User {
    constructor() {
        console.log("constructor called!!");
        let a = new User();
    }
}

new User();

0
2

It may sound silly but I accidentally was wrapping my component in its own HTML tag. Which caused the error.

2
  • Thanks. Happened to me and it would have taken forever to find this.
    – Patrick
    Jan 20, 2022 at 13:50
  • I spent 2 hours chasing the same error and found out that I was calling the method defined in the component itself when I made the this.doThis() call. I had the same doThis() defined in the service. I should have done this.service.doThis() instead of this.doThis() from my component. Jun 26, 2022 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.