Angular 4升18时Bootstrap触发无限循环栈溢出问题求助

核心问题 #

你的AppComponent把index.html作为模板文件，但index.html本身包含了<app-root>（Angular根组件的选择器）。Angular启动时会在index.html中找到<app-root>并渲染AppComponent，而AppComponent的模板又是整个index.html，这会再次触发<app-root>的渲染，形成无限递归循环，最终导致栈溢出错误。

修复步骤 #

1. 拆分模板文件 #

创建独立的app.component.html文件，把index.html里<app-root>内部的所有内容移到这个新文件中：

<nav id="header" class="navbar navbar-expand-md" (click)="toggleMenu($event)">
  <div class="navbar-brand">{{ activeRouteTitle }}</div>
  <ul id="menu-navbar" class="navbar-nav mr-auto main-menu toggle-nav" [class.active]="menuToggle">
    <li class="nav-item toggle-nav">
      <a class="nav-link" routerLink="/allocations" routerLinkActive="active"><span>Allocations</span></a>
    </li>
    <li class="nav-item toggle-nav">
      <a class="nav-link" routerLink="/validation" routerLinkActive="active"><span>Validation</span></a>
    </li>
    <li class="nav-item toggle-nav">
      <a class="nav-link" routerLink="/groups" routerLinkActive="active"><span>Resources</span></a>
    </li>
    <li class="nav-item toggle-nav">
      <a class="nav-link" routerLink="/projects" routerLinkActive="active"><span>Projects</span></a>
    </li>
    <li class="nav-item toggle-nav">
      <a class="nav-link" routerLink="/export" routerLinkActive="active"><span>Export</span></a>
    </li>
  </ul>
  <div class="menu-hamburger"><i id="menu-toggler" class="fa fa-bars" aria-hidden="true"></i></div>
</nav>
<div *ngIf="!supported" class="ie-info"><span>Internet Explorer is not a&nbsp;supported browser. </span></div>
<div class="ispinner ispinner--gray ispinner--animating ispinner--large">
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
  <div class="ispinner__blade"></div>
</div>
<div (click)="menuToggle = false">
  <ng-template ngbModalContainer></ng-template>
  <router-outlet></router-outlet>
</div>

修改index.html，只保留根组件占位符：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/static/src/dist/dev/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" sizes="16x16" href="/public/favicon.ico" type="image/jpeg" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

2. 更新AppComponent的模板引用 #

修改app.component.ts中的templateUrl，指向新创建的app.component.html：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // 确保路径与文件位置匹配
  providers: [
    GlobalListenersService,
    ResourcesService,
    TeamsService,
    AllocationsService,
    ScrumTeamService,
    BusinessUnitService,
    BusinessLineService,
    BusinessCategoryService,
    ProjectsService,
    ProductClassesService,
    InitiativesService,
    HeaderService,
    ExportService,
    SessionService,
    ADUserQueryService,
    ResourceFunctionsService,
    ResourceCostCentersService,
  ],
})

3. 额外优化建议 #

• 把AppComponent装饰器里的providers数组移到AppModule的providers中，或者给每个服务添加providedIn: 'root'（Angular 14+推荐方式），避免重复实例化服务。
• 检查路由配置中未定义的路径（如/validation、/groups），确保对应的组件和路由已正确注册，避免导航报错。

验证修复 #

重新构建运行应用，此时AppComponent只会初始化一次，无限循环问题消失，开发者工具能正常显示控制台输出。

内容的提问来源于stack exchange，提问作者Gibosky