Angular 7 error RangeError: Maximum call stack size exceeded

Question

I am trying to learn angular by following the official tutorial but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded".

The hero.component.html:

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

The detail component:

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

The hero component

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

The hero.detail component

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without an error

any help is appreciated

In your example you render component inside yourself, so you never finish this operation and all time render another child component (if second part of block is `` — kris_IV, Dec 13 '18 at 06:56
If you are looking in console, there might be an error before the error that is mentioned in your question. Can you please check and update the same — Sachin Gupta, Dec 13 '18 at 07:17
Same error messages, if any feature module, are same in child and parent module. — Alam, Aug 15 '22 at 18:46

Santhosh mp · Accepted Answer · 2018-12-13T08:48:43.370

44

1.This error occur when there is an infinite loop. As you have mentioned that the page loads when app-heroes is commented, this might be used as selector-name for more than one component which is not allowed. This can cause an infinite loop and fail to load components.

Try making below edits,

hero.component.html

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<app-hero-detail [hero]="selectedhero"></app-hero-detail>

hero.detail.component.html

<div *ngIf="hero">
  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>
</div>

Hope this helps.

edited Dec 13 '18 at 08:48

answered Dec 13 '18 at 07:00

Santhosh mp

559
7
12

hello . have checked and that doesnt seem to be the case . (question updated) – Abdul Ali Dec 13 '18 at 07:10
Can you please create an example to replicate your problem here https://stackblitz.com/ – Santhosh mp Dec 13 '18 at 08:36
@AbdulAli `doesn't seem to help` then why was it marked as answer? – Captain Prinny Jan 22 '20 at 14:00
@CaptainPrinny It worked after eidting the answer :) – Abdul Ali Jan 31 '20 at 05:10

kris_IV · Answer 2 · 2018-12-13T07:30:04.380

In your example you render component inside yourself, so you never finish this operation and all time render another child component (if second part of block is

Update - more details:

If you write app with components, all components are hierarchical, so you can include the same component inside yourself only if you are sure, that this is limited amount of loop inside. In your code example you has unlimited nested components, because child component generate next child component inside yourself body. In result your browser display error: RangeError: Maximum call stack size exceeded

hero.component.html

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

app-hero-details.component.html

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

// you should comment line below
// <app-hero-detail [hero]="selectedHero"></app-hero-detail>

thank you for the answer. can you kindly explain a bit as am completely new to angular and the components' hierarchy — Abdul Ali, Dec 13 '18 at 07:11
Great answer... A good example would be naming a component "header", which would conflict with a header tag inside the component partial. — John Spiteri, Feb 15 '20 at 21:43

Lucas · Answer 3 · 2021-05-24T13:46:39.447

I will add an answer that describes a different cause for this error when upgrading to angular 8 an existing application and using new routing features.

In my case, I added to each lazy loaded route the data object with preload set to true || false using the new syntax:

  {
    path: '',
    loadChildren: () => import('./views/home/home.module').then(mod => mod.HomeModule),
    data: { preload: true }
  },

However it took me a while to realize that I had left the preloadingStrategy set to PreloadAllModules in my RouterModule forRoot declaration:

@NgModule({
  imports: [RouterModule.forRoot(
    routes,
    {
      preloadingStrategy: PreloadAllModules, <-- This is the cause
    })],
    ...

Removing preloadingStrategy from the module forRoot declaration and relying on the route data preload definitio fixes the issue.

score 6 · Answer 4 · answered Jun 21 '20 at 12:04

This error occurred when I used a circular module import mistakenly on Angular 9.

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
 imports: [
    CommonModule,
    ModuleTwo
  ],
 
})
export class ModuleOne {
}

and

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
    @NgModule({
    imports: [
        CommonModule,
        ModuleOne
      ],
     
    })
    export class ModuleTwo {
    }

score 5 · Answer 5 · answered Mar 16 '20 at 22:11

5

I was dealing with this error when my intellisense accidentally added the module name (instead of a specific component name) to the exports for the module:

@NgModule({
  declarations: [
    FooComponent,
    // ...
  ],
  imports: [CommonModule],
  exports: [
    FooModule, // <== should be 'FooComponent'
    // ...
  ], 
})
export class FooModule {}

It definitely would be nice if the error was a little more descriptive though, as this tool me some time

answered Mar 16 '20 at 22:11

Kurtis Jungersen

2,204
1
26
31

1

Mine was similar in nature. AppModule was pulled into a child module which is imported inside of AppModule. In my case, Intellij did the damage. – Software Prophets Oct 28 '21 at 15:17

score 4 · Answer 6 · answered Dec 13 '18 at 07:29

4

You have the <app-hero-detail> displayed inside the details HTML.

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

Please try removing this. A similar line is commented in the hero.component.html, you can uncomment that.

answered Dec 13 '18 at 07:29

Sachin Gupta

4,981
3
16
32

score 2 · Answer 7 · answered Jan 14 '20 at 12:50

A different cause for this error when upgrading to angular 8 an existing application and using new routing features in separate file.

In my case not importing the featureRouterModule to its particular featureModule.ts cause maximum stack exceed error.Since angular can't find its particular router file registered

score 2 · Answer 8 · answered Mar 13 '20 at 10:13

I was able to reproduce this error message when I created a module and I forget to add the RoutingModule.

@NgModule({
  declarations: [
  SuccessComponent,
  CheckoutComponent
],
  imports: [
    ShareModule,
    PaymentRoutingModule // Forget to add it.
  ]
})
export class PaymentModule { }

I have no idea why I got this error, but maybe another person can make the same mistake.

score 1 · Answer 9 · answered Oct 06 '20 at 11:12

Possible cases for this error which I found:

2 or more modules with the same name
Wrong imports in your app.module.ts file
Problem with compilation

Solution that you can try:

for point 1, change the names and make them unique
for point 2, make sure all imports are intended as per your use case for a module, do check for inter-dependency between modules
for point 3, rare but happens if browser doesn't have enough memory to process, so try to restart your code editor, browser or your PC.

Thanks for this! I had a routing module export with the module export name, just needed to add "routing"to the name. — DonCarleone, Jun 07 '23 at 17:42

score 1 · Answer 10 · answered Apr 29 '22 at 07:31

This happened when I was subscribing to an observable more frequently than required. I was subscribing to the below observable on every Enter key press,

this.filteredOptions.subscribe((res) => this.addSelectedContacts(event, res[keyManager.activeItemIndex]))

This was obviously not required, I had to limit the observable to only get the first emission by adding pipe(take(1)) as,

this.filteredOptions.pipe(take(1)).subscribe((res) => this.addSelectedContacts(event, res[keyManager.activeItemIndex]))

You might also use the swithMap operator syntax to dismiss previous subscriptions.

score 0 · Answer 11 · answered Jun 01 '20 at 00:20

0

I named two modules similarly and didn't pay attention to which I imported. If you import a module inside itself it will cause circular import till maximum call stack is reached.

answered Jun 01 '20 at 00:20

Omar Iriskic

1
1

score 0 · Answer 12 · answered Jun 20 '23 at 00:41

0

I solved an infinite loop ploblemma I was having after I removed a call from a service I was doing within the same service, but with different behavior.

answered Jun 20 '23 at 00:41

Wesley Bruno

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 22 '23 at 08:25

score -1 · Answer 13 · answered Jul 21 '22 at 12:36

-1

Angular 12

I encounter this on a infinite loop which causes ui to change on every iteration.

answered Jul 21 '22 at 12:36

Yunus Gedik

53
1
9

Angular 7 error RangeError: Maximum call stack size exceeded

13 Answers13

Linked