CODEWITHSUNDEEP
angular
Brandon Brawley
Brandon Brawley

Reputation: 137

ERROR RangeError: Maximum call stack size exceeded [Angular]

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.

Upvotes: 1

Views: 15632

Answers (2)

Star
Star

Reputation: 54

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

Upvotes: 2

planet_hunter
planet_hunter

Reputation: 3976

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();

Upvotes: 2

Related Questions