Angular Router - 为什么需要 App Root 和 Bootstrap？答案

【问题标题】：Angular Router - Why Do You Need App Root and Bootstrap?Angular Router - 为什么需要 App Root 和 Bootstrap？
【发布时间】：2018-09-21 14:19:53
【问题描述】：

Angular 路由器定义了一个名为 router-outlet 的指令，如果它是路由器加载的路由，它会在该位置呈现指定的组件。

由于您可以定义基本根 (/)，因此可以假设您不再需要引导组件，因为路由器现在可以将您的父组件放在 DOM 上。

然而，如果你没有定义一个引导组件，你会得到一个错误：

The module AppModule was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method.

还假设AppModule，如果它被引导，应该引导到<app-root/>标签（按照惯例）。

我不明白。如果应用程序引导并且路由器正在路由，应用程序应该如何工作？这不会导致双重组件等吗？如果应用被渲染到router-outlet，那么app-root标签在做什么？

【问题讨论】：

路由器插座放在哪里？不在应用组件模板中？
我认为这是一个很好的问题。我们可以在 index.html 文件中使用 router-outlet 指令。

标签： angular angular-router

【解决方案1】：

Angular CLI 有一些默认约定，但它们可以被覆盖。其中之一是您的主要 NgModule 称为 AppModule，而您的顶级组件称为 AppComponent。这些可以定制。查看您的 main.ts 文件和 app.module.ts 文件。 main.ts：

    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));

main.ts 文件默认会提升 AppModule（您可以再次覆盖它）

这是来自 app.module.ts 的一个相关部分：

    @NgModule({
  schemas: [
    NO_ERRORS_SCHEMA
  ],
  declarations: [
    AppComponent,
   ...
  ],
  imports: [
   ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})

Angular 必须在路由工作之前引导。一旦它启动，它就会查看 DOM 以查看它应该将启动组件附加到哪里。也就是说，它查看 DOM 并查找 <app-root> 元素，因为（默认情况下）您的 AppComponent 是引导组件（在 AppModule 中定义），应用程序组件具有默认选择器“app-root”。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.scss']
})
export class...

通常您希望 <router-outlet></router-outlet> 元素位于 app.component.html 文件中。这不会导致双分量。

Angular 运行时环境必须在您的应用在浏览器中执行之前引导。并且 Angular 的路由模块只有在 Angular 的运行时执行后才能工作。

Angular Module Bootstraping

【讨论】：