[Angular] ERROR RangeError: Maximum call stack size exceeded

[Brandon Brawley]

Hi 

I am a complete beginner to Angular and 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. Any help would be greatly appreciated. 

See code below or check my GitHub.

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>

Code breaks when the above is entered.

[Brandon Brawley]

Hi, 

I'm new to Angular and building a simple Todo list app to learn the platform better. The first view I am building is a form (login). I am following the documentation but once I revise app.component.html with the form's HTML I get the ERROR RangeError: Maximum call stack size exceeded. Any help will be much appreciated. Let me know if you need more details.

Below are all the changes I've made thus far.

The error occurs when I add the above line of code. Any ideas?

[abhay dhar]

Hi Brandon,

The error -  ERROR RangeError: Maximum call stack size exceeded , will generally occur when there is a infinite loop in the application. Try removing this line - //get diagnostic() { return JSON.stringify(this.model); }

Also, does the code compile correctly in cmd prmpt ?