Angular 7 error RangeError: Maximum call stack size exceeded

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.

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.

2. 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.

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.

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>