Maximum Call Stack Size Exceeded

In Angular, the Maximum call stack size exceeded error occurs when a component repeatedly calls itself, either directly or indirectly. This results in an infinite loop of rendering, eventually overflowing the JavaScript call stack and causing the app to crash. This is often caused by improper template bindings, misused structural directives, or incorrect component references. Let’s take a look at a simple example to better understand the issue.

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>

detail component

  
{{hero.name}} Details
  
id: {{hero.id}}
  

    name:
      
    
  

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;
  }
}

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() {
  }
}

Problem in Code:

This example unintentionally creates a recursive loop because is included inside hero.component.html, and it itself contains logic to display hero-detail, which again includes the same app-hero-detail, forming an endless self-reference.

Solution:

To fix the issue, we just need to remove the recursive component call. In this case, should not be placed inside its own template

Updated hero.component.html

  

    {{hero.id}} {{hero.name}}
  

Conclusion:

The Maximum call stack size exceeded error in Angular is usually caused by recursive component rendering. By carefully managing component references and avoiding unintended self-references, this issue can be easily prevented. Always check your templates for cycles and ensure proper component structure to keep your app running smoothly.

Also Read:

Angular Performance Optimization