Angular学习笔记62：Angular应用的启动过程

通过Angular6学习笔记15：核心知识-模块（NgModule）了解到，通过 NgModule 的相关设置，Angular就会知道整个应用的各个部分是如何组织的。每个应用有至少一个 Angular 模块，然而根模块就是用来启动应用的模块。通常情况下命名为 AppModule。

看下 demo-test 的 AppModule:

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

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HashLocationStrategy, LocationStrategy, registerLocaleData} from '@angular/common';
import zh from '@angular/common/locales/zh';
import {IntroduceComponent} from './introduce/introduce.component';
import {DemoSiderComponent} from './demo-sider/demo-sider.component';
import {ShowdownModule} from 'ngx-showdown';
import {NameValidatorDirectiveDirective} from './public/directive/name-validator-directive.directive';

registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent,
    IntroduceComponent,
    DemoSiderComponent,
    NameValidatorDirectiveDirective,
  ],
  imports: [
    ShowdownModule,
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [
    {
      provide: NZ_I18N,
      useValue: zh_CN
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

在JavaScript模块引入以后，在import引入模块的下面有一个@NgModule的装饰器，通过这个装饰器，就说明 AppModule 是一个 NgModule 类。@NgModule 获取一个元数据对象，从而 Angular 就会知道如何编译和启动这个应用。

@NgModule 的元数据对象

• declarations

declarations说明了这个应用所拥有的组件(在没有惰性加载的模块的情况下)，并且每一个组件只能生命在一个@NgModule的declarations数组中，如果同时声明在了两个 @NgModule的declarations数组中，则会报错：

ERROR Error: Uncaught (in promise): Error: Type IntroduceComponent is part of the declarations of 2 modules: AppModule and PagesModule! 

在declarations数组中，declarations接受可声明对象(组件、指令和管道)。

• imports

imports 数组可以让 Angular 知道，当前这个模块需要导入的其他模块信息，这个数组中，说明了当前模块中的所使用的每个组件、指令、管道所引用的其他模块中的组件、指令、管道。
例如：在demo-test中，导入了：ShowdownModule,BrowserModule,AppRoutingModule,NgZorroAntdModule,HttpClientModule,BrowserAnimationsModule，就说明，当前的 AppModule 中的组件、指令、管道引入了 ShowdownModule,BrowserModule,AppRoutingModule,NgZorroAntdModule,HttpClientModule,BrowserAnimationsModule这些模块中的 组件、指令、管道。

• providers

providers 数组列出了当前应用所需的服务。当直接把服务列在这里时，它们是全应用范围的。 当你使用特性模块和惰性加载时，在特性模块和惰性加载的模块中，提供的服务就会有一定的范围限制。
例如在：在demo-test中，提供了一下的服务，下面这也服务的作用范围是整个应用：

providers: [
    {
      provide: NZ_I18N,
      useValue: zh_CN
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }],

• bootstrap

应用是通过引导根模块 AppModule 来启动的，根模块还引用了 entryComponent。 此外，引导过程还会创建 bootstrap 数组中列出的组件，并把它们逐个插入到浏览器的 DOM 中。每个被引导的组件都是它自己的组件树的根组件，在demo-test中跟组件就是 AppComponent 。

这里为什么没有看到entryComponent？
@NgModule 装饰器具有一个 entryComponents 数组，但大多数情况下你不用显式设置入口组件，因为 Angular 会自动把 @NgModule.bootstrap 中的组件以及路由定义中的组件添加到入口组件中，除非要通过其他方式来启动或者动态加载某个组件时，就可以把 entryComponents 数组显示出来进行设置。