Angular 7错误RangeError：超出最大调用堆栈大小

Question

我正在尝试通过遵循官方教程（https://angular.io/tutorial/）学习angular，但是在对hero组件和hero detail组件执行以下步骤时，会引发错误“ 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

1.无限循环时发生此错误。正如您已经提到的，在对app-heroes进行注释时，页面会加载，这可能用作一个以上不允许的组件的选择器名称。这可能会导致无限循环，并且无法加载组件。

2. 尝试进行以下修改，

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>

希望这可以帮助。

Answer 2

在您的示例中，您在自己内部渲染组件，因此您永远不会完成此操作，而是始终渲染另一个子组件（如果块的第二部分是

更新 - 更多细节：

如果您使用组件编写应用程序，则所有组件都是分层的，因此只有在您确定这是内部循环数量有限的情况下，您才能在自己内部包含相同的组件。在您的代码示例中，您拥有无限的嵌套组件，因为子组件会在您自己的体内生成下一个子组件。结果你的浏览器显示错误：RangeError: Maximum call stack size exceeded

英雄组件.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

当我在 Angular 9 上错误地使用循环模块导入时，出现了此错误。

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

和

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

Answer 4

在将现有应用程序升级到 angular 8 并使用新的路由功能时，我将添加一个描述此错误的不同原因的答案。

以我为例，我添加到每个延迟加载路由data与对象preload设置为true || false使用新的语法：

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

然而，我花了一段时间才意识到我已经在我的forRoot 声明中留下了preloadingStrategyset ：PreloadAllModulesRouterModule

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

从根声明模块中删除 preloadingStrategy 并依赖路由数据预加载定义解决了该问题。

Answer 5

当我的智能感知意外地将模块名称（而不是特定的组件名称）添加到模块的导出时，我正在处理此错误：

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

如果错误能更具描述性的话那就太好了，因为这个工具我有时会用到