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

【问题标题】：Angular 7 error RangeError: Maximum call stack size exceededAngular 7 错误 RangeError：超出最大调用堆栈大小
【发布时间】：2019-05-14 08:25:08
【问题描述】：

我正在尝试通过遵循 official tutorial 来学习 Angular，但是当遵循 hero component 和 hero detail component 的步骤时，它会引发错误“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>

detail component:

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

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

}

要提一提的是<app-heroes></app-heroes>被评论时，列表页加载无误

任何帮助表示赞赏

【问题讨论】：

在您的示例中，您在自己内部渲染组件，因此您永远不会完成此操作并一直渲染另一个子组件（如果块的第二部分是 <app-hero-detail>
如果您在控制台中查看，在您的问题中提到的错误之前可能有错误。你能检查并更新一下吗
@SachinGupta 截图上传

标签： angular angular7

【解决方案1】：

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>

希望这会有所帮助。

【讨论】：

你好。已经检查过，似乎并非如此。（问题已更新）
您能否在此处创建一个示例来复制您的问题stackblitz.com
@AbdulAli doesn't seem to help 那么为什么它被标记为答案？
@CaptainPrinny 在找到答案后它起作用了:)

【解决方案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>

【讨论】：

感谢您的回答。您能否解释一下，因为我对 Angular 和组件的层次结构完全陌生
很好的答案... 一个很好的例子是将组件命名为“header”，这将与组件部分内的 header 标签冲突。

【解决方案3】：

<app-hero-detail> 显示在详细信息 HTML 中。

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

请尝试删除它。 hero.component.html中也有类似的注释，你可以取消注释。

【讨论】：

【解决方案4】：

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

在我的例子中，我使用新语法向每个延迟加载的路由添加了 data 对象，并将 preload 设置为 true || false：

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

但是我花了一段时间才意识到我在RouterModule forRoot 声明中将preloadingStrategy 设置为PreloadAllModules：

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

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

【讨论】：

【解决方案5】：

将现有应用程序升级到 Angular 8 并在单独的文件中使用新的路由功能时，导致此错误的另一个原因。

在我的情况下，不将 featureRouterModule 导入到其特定的 featureModule.ts 会导致最大堆栈超出错误。由于 Angular 找不到其特定的路由器文件已注册

【讨论】：

【解决方案6】：

我在创建模块时能够重现此错误消息，但我忘记添加 RoutingModule。

@NgModule({
  declarations: [
  SuccessComponent,
  CheckoutComponent
],
  imports: [
    ShareModule,
    PaymentRoutingModule // Forget to add it.
  ]
})
export class PaymentModule { }

我不知道为什么会出现这个错误，但也许其他人也会犯同样的错误。

【讨论】：

【解决方案7】：

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

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

不过，如果该错误更具描述性，那肯定会很好，因为这个工具我有一段时间

【讨论】：

我的性质类似。 AppModule 被拉入到 AppModule 内部导入的子模块中。就我而言，Intellij 造成了损害。

【解决方案8】：

我对两个模块进行了类似命名，并没有注意我导入了哪个模块。如果你在自身内部导入一个模块，它将导致循环导入，直到达到最大调用堆栈。

【讨论】：

【解决方案9】：

当我在 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 {
    }

【讨论】：

【解决方案10】：

我发现的此错误的可能情况：

2个或更多同名模块
app.module.ts 文件中的错误导入
编译问题

您可以尝试的解决方案：

对于第 1 点，更改名称并使其独一无二
对于第 2 点，确保所有导入都针对您的模块用例，请检查模块之间的相互依赖关系
对于第 3 点，这种情况很少见，但如果浏览器没有足够的内存来处理，就会发生这种情况，因此请尝试重新启动代码编辑器、浏览器或 PC。

【讨论】：