Question

我尝试通过遵循官方教程（https://angular.io/tutorial/）学习语言，但是在按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

hero.component.html和详细代码如下：

src = URL.createObjectURL(file);
Environment.setBackgroundImage(src, {format: format});

有关详细信息：

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

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

}

要提及的一件事是，在对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() { } }进行注释时，将加载列表页面而不会出现错误

任何帮助表示赞赏

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

希望这会有所帮助。

Answer 2

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

对于我来说，我使用新的语法将data对象设置为preload的{{1}}对象添加到每个延迟加载的路由中：

true || false

但是我花了一段时间才意识到我已经在{ path: '', loadChildren: () => import('./views/home/home.module').then(mod => mod.HomeModule), data: { preload: true } }, forRoot声明中将preloadingStrategy设置为PreloadAllModules了：

RouterModule

从用于Root声明的模块中删除preloadingStrategy并依靠路由数据预加载definitio可以解决此问题。

Answer 3

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

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

Answer 4

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

let conf = WKWebViewConfiguration()

let ctrl = WKUserContentController()

conf.userContentController = ctrl

let wkDataStore = WKWebsiteDataStore.nonPersistent()

wkDataStore.removeData(
    ofTypes: WKWebsiteDataStore.allWebsiteDataTypes(),     
    modifiedSince: .distantPast) { }

HTTPCookieStorage.shared
                .cookies?
                .forEach { wkDataStore.httpCookieStore.setCookie($0) }

conf.websiteDataStore = wkDataStore

wkWebView = WKWebView(frame: .zero, configuration: conf)

// ...

// Get URL from getAuthenticatedURL and load in wkWebView

我不知道为什么会出现此错误，但是也许另一个人也可能犯同样的错误。

Answer 5

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

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

如果错误的描述性更强一点，那肯定会很好，因为我有一段时间用这个工具

Answer 6

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

更新-更多详细信息：

如果您使用组件编写应用程序，则所有组件都是分层的，因此只有在确定内部循环数量有限的情况下，才能在您自己内部包含相同的组件。在您的代码示例中，您具有无限的嵌套组件，因为子组件会在您体内生成下一个子组件。结果您的浏览器显示错误：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 7

您在详细信息HTML内显示了<app-hero-detail>。

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

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

Answer 8

当我在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 9

我以类似的方式命名了两个模块，并且没有注意导入的模块。如果您将模块导入其内部，则会导致循环导入，直到达到最大调用堆栈为止。

Answer 10

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

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

您可以尝试的解决方案：

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

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

10 个答案: