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.