时间戳

首页 > 解决方案 > 当我更改引导顺序时，为什么我的 Angular 应用程序卡在加载中？

angular - 当我更改引导顺序时，为什么我的 Angular 应用程序卡在加载中？

问题描述

我做了我的第一个组件，它工作正常。第二个组件也可以正常工作。但是，当我将这两个组件添加到 app.module.ts 引导程序时，根据顺序，它会永远加载。

索引.html：

<!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyFirstApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <!--app-my1>loading...</app-my1-->
    <app-my2>loading2...</app-my2>
  </body>
</html>

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { My1 } from './my1/my1.component';
import { My2 } from './my2/my2.component';

@NgModule({
  declarations: [
    My1,
    My2
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [My2] // if I use this line, it works
  bootstrap: [My2, My1] // if I use this line, it works
  bootstrap: [My1, My2] // if I use this line, it stays loading forever, why?
})
export class AppModule { }

此外，如果我在 index.html 上取消注释 app-my1，它会起作用。但是评论这一行是否应该使应用程序卡在加载中？为什么？

标签： angulartypescript

解决方案

引导程序应仅包含根组件 (AppComponent)。您可以在应用程序组件中添加两个新组件作为普通标签，它会正常工作。

推荐阅读