Ошибка Angular 7 RangeError: Превышен максимальный размер стека вызовов

Question

я пытаюсь выучить угловой, следуя официальному учебнику (https://angular.io/tutorial/), но при выполнении шагов для компонента героя и компонента детализации героя выдается ошибка «RangeError: Превышен максимальный размер стека вызовов».

код 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>

для деталей:

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

компонент героя

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компонент

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

}

Следует отметить, что при комментировании <app-heroes></app-heroes> страница списка загружается без ошибок

любая помощь приветствуется

Answer 1

Я добавлю ответ, который описывает другую причину этой ошибки при обновлении существующего приложения до angular 8 и использовании новых функций маршрутизации.

В моем случае я добавил к каждому загруженному ленивому маршруту data объект с preload установленным на true || false с использованием нового синтаксиса:

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

Однако мне потребовалось некоторое время, чтобы понять, что я оставил preloadingStrategy установленным на PreloadAllModules в моем RouterModule Объявление forRoot:

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

Удаление preloadingStrategy из модуля для объявления forRoot и использование определения предварительной загрузки данных маршрута решает проблему.

Answer 2

В вашем примере вы визуализируете компонент внутри себя, поэтому вы никогда не завершаете эту операцию и все время визуализируете другой дочерний компонент (если вторая часть блока равна

Обновление - более подробная информация:

Есливы пишете приложение с компонентами, все компоненты являются иерархическими, поэтому вы можете включать один и тот же компонент внутри себя, только если вы уверены, что это ограниченное количество циклов внутри. В вашем примере кода у вас есть неограниченное количество вложенных компонентов, потому что следующий дочерний компонент генерирует следующийдочерний компонент внутри вашего тела. В результате ваш браузер отображает ошибку: 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>

Answer 3

В подробностях HTML отображается <app-hero-detail>.

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

Пожалуйста, попробуйте удалить это.Аналогичная строка закомментирована в hero.component.html, вы можете раскомментировать это.

Answer 4

1.Эта ошибка возникает при наличии бесконечного цикла.Поскольку вы упомянули, что страница загружается при комментировании app-heroes , может использоваться в качестве имени селектора для более чем одного компонента , что недопустимо.Это может привести к возникновению бесконечного цикла и невозможности загрузки компонентов.

Попробуйте внести следующие изменения:

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>

Надеюсь, это поможет.