在ANGLE中，我们得到了被称为NgModules的模块，作为粘合应用程序或应用程序中的功能的单元。所有ANGLE应用程序都有一个根模块，即app模块，负责将整个应用程序统一在一起。将应用程序的各个功能分解到各自的模块中也是一个最佳实践。这种做法使诸如Lazy loading或preloading某些功能。

<$>[注]这篇文章介绍了角2+<$>的NgModule

<$>[警告]不要将角度模块与ES6 modules.]混淆这是两件截然不同的事情。<$>

以下是一个基本的NgModule的样子：

 1// ...ES6 module imports
 2
 3@NgModule({
 4  declarations: [ ... ],
 5  imports: [ ... ],
 6  providers: [ ... ],
 7  bootstrap: [ ... ],
 8  entryComponents: [ ... ],
 9  exports: [ ... ]
10})
11export class MyModule { }

这里有一个实际成员的例子：

 1[label app.module.ts]
 2import { BrowserModule } from '@angular/platform-browser';
 3import { NgModule } from '@angular/core';
 4import { FormsModule } from '@angular/forms';
 5import { MaterialModule } from '@angular/material';
 6import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 7
 8import { AppComponent } from './app.component';
 9import { VideoPlayerComponent } from './video-player/video-player.component';
10import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
11import { VideoService } from './services/video.service';

Breaking It Down

让我们简要地解释一下@NgModule修饰符中的每个条目：

声明

这是为了指定应该是模块一部分的组件、pipes和directives。

导入

这是为了导入已导出成员的其他模块，以在作为NgModule一部分的组件的模板中使用。例如，BrowserModule重新导出CommonModule，这使得内置的NgIf和NgFor指令可用。

RouterModule、BrowserModule、FormsModule、HttpModule和BrowserAnimationsModule是常用导入模块的示例。

导出

如果您想要导出模块的成员，以便在其他模块的组件模板中使用，这些成员将放在Exports 数组中。

以CommonModule为例，会导出COMMON_DIRECTIVES和COMMON_PIPES，这就是您将BrowserModule或CommonModule导入到您自己的NgModules中时组件模板可以使用的内容。

引导

这是为了定义根组件，它通常称为AppComponent。这意味着Bootstrap 只能包含一个成员，并且只能在APP主模块中定义。

提供商

这就是注射剂的发展方向。像服务、Route guards和http interceptors]这样的东西是应该是Providers 数组的一部分的可注入的例子。一旦他们被提供，他们将在应用程序中的任何地方都可以使用。这就是为什么服务通常在根应用程序模块中提供的原因。

Entry组件

这是针对Angular编译器在编译期间无法找到的组件，因为它们在组件模板中的任何地方都没有引用。在模板中路由的组件通常不会被引用，但是Angular会自动将它们添加到 entryComponents 中，所以不需要自己添加它们。

应该放入entryComponents 的组件并不常见。一个很好的例子是角度材质dialogs，，因为它们是动态创建的，否则角度编译器不会知道它们。