NgModule 是你使用 Angular 编写应用程序时遇到的第一个基本结构，但由于涉及不同的作用域范围，它也是最微妙和最复杂的。如果你想详细了解 NgModule 的相关知识，可以直接参考 Angualr NgModule FAQ 或 Angular FAQ 文章中 NgModule 版块的内容 。
Why NgModule?
我们可以使用 Angular CLI，自动完成很多工作，但我们必须要做的第一件事就是加载根模块。
platformBrowserDynamic().bootstrapModule(AppModule);NgModule 的目的是声明我们在 Angular 模块中创建的内容，主要有以下两种结构：
declarations – 声明模板中使用的内容，大部分是组件，也包括指令和管道。
providers – 用于声明服务。
import { NgModule } from '@angular/core';
import { SomeComponent } from './some.component';
import { SomeDirective } from './some.directive';
import { SomePipe } from './some.pipe';
import { SomeService } from './shared/some.service';
@NgModule({
declarations: [SomeComponent, SomeDirective, SomePipe],
providers: [SomeService]
})
export class SomeModule {}NgModule 是 Angular RC 阶段新增的一个功能，因为 ES 6 中已经新增 import/export 功能，在引入 NgModule 似乎增加了不必要的复杂性。但引入了 NgModule 让我们可以使用 AOT 编译，这大大提高了应用的性能。在 Angular 2 早期 Beta 版本中，我们的组件在使用指令时，都必须每次导入相应的指令，这大大增加开发成本。
NgModule and scopes/visibility
declarations 和 providers 属性最令人困惑的是，它们没有相同的作用域和可见性 (scope / visibility)：
declarations / components 是本地作用域 (private visibility)
providers / services 是全局作用域 (public visibility)
这意味着你声明的组件只能在当前模块中使用。如果你想要在外面使用声明的组件，你必须导出它们：
import { NgModule } from '@angular/core';
import { SomeComponent } from './some.component';
import { SomeDirective } from './some.directive';
import { SomePipe } from './some.pipe';
@NgModule({
declarations: [SomeComponent, SomeDirective, SomePipe],
exports: [SomeComponent, SomeDirective, SomePipe]
})
export class SomeModule {}反之，模块中的声明的服务，我们可以在所有模块中使用。
When to import a NgModule?
components 和 services 拥有不同的作用域，了解这个区别很重要。如果我们的应用程序不仅仅包含一个模块，事情可能会变得很糟糕。Angular 框架内部也拆分成多个不同的模块，如 core、common、http 等等。
在 Angular 模块中我们需要做的一件主要的事情是导入其它模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FeatureModule } from '../feature/feature.module';
@NgModule({
imports: [CommonModule, HttpModule, FeatureModule]
})
export class SomeModule {}现在的主要问题是，你必须知道为什么需要导入这些模块：
为了使用导入模块中声明的组件、指令或管道？
为了使用模块中定义的服务？
因为组件和服务，拥有不同的作用域：
如果我们需要在模块中使用导入模块中声明的组件，那我们需要在每个使用的模块中导入对应的模块
如果我们只是使用模块中定义的服务，那我们只需要在主模块中导入对应的模块
如果你不了解这些区别，你可能由于忘记导入某个模块，而出现组件不可用的错误。或者你为了使用某个模块中定义的服务，而多次导入同一个模块。
When to import main Angular Modules?
Modules to import each time you need them
CommonModule (包含 Angular 中定义的内建指令，如 ngIf、ngFor 等)，除了在主模块之外，不需要导入，因为我们已经在主模块中导入了
BrowserModule(此模块已导入了 CommonModule)。其它模块都必须手动导入该模块。FormsModule / ReactiveFormsModule
BrowserAnimationsModule
FlexLayoutModule
MaterialModule 和 UI Modules (如 PrimeNg)
Other Modules (定义 components、directives 或 pipes)
Modules to import only once
HttpModule
Other Modules (仅提供服务)
The ShareModule good practice
若使用 Angular CLI 创建新的模块，它会自动帮我们导入 CommonModule。如果你需要使用与组件相关的模块如 animations 、flex layout 或 Material 模块，你必须每次手动导入上述模块。因此一个好的实践是创建 SharedModule 模块。
管理 SharedModule 时，需要很小心。如果你只是导入模块，它将无法正常工作：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [CommonModule, FlexLayoutModule, MaterialModule]
})
export class SharedModule {}为什么呢？原因仍是作用域的问题：组件只在 SharedModule 中可用，在其它导入 SharedModule 的模块中，仍然是不可用的。因此我们需要导出相应的组件：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [CommonModule, FlexLayoutModule, MaterialModule],
exports: [CommonModule, FlexLayoutModule, MaterialModule]
})
export class SharedModule {}如果我们组件不包含其它共享的资源，我们可以省略 imports 属性：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material';
@NgModule({
exports: [CommonModule, FlexLayoutModule, MaterialModule]
})
export class SharedModule {}Mixed NgModule
如何同时管理具有组件和服务的模块？这是一个比较复杂的问题。你可能已经接触过 RouterModule，该模块不仅提供了 <router-outlet> 、routerLink 指令，而且还提供了 ActivedRouter 服务 (用于获取 URL 参数)、Router 服务 (用于页面导航) 。
幸运的是，这个问题是由模块本身来解决。 Angular CLI 会为我们自动生成路由文件，但你可能已经注意到，应用程序主模块的路由和子模块路由之间存在细微差别。
对于 AppModule，我们这样使用：
RouterModule.forRoot(routes)对于子模块，我们这样使用：
RouterModule.forChild(routes)为什么呢？因为在 AppModule 中，forRoot() 方法会导入路由模块中的指令和服务。但对于子模块来说，forChild() 方法仅会导入路由模块中定义的指令，而不会再次导入模块中定义的服务。
Lazy-loaded modules
如果你需要实现模块懒加载，可以简单地使用 Angular CLI 来实现：
const routes: Routes = [
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];因为它将是一个不同的包和模块，默认情况下是按需加载，它不会包含在您的应用程序的全局范围内。
对于组件来说，你不需要更改任何内容：就像在任何子模块中一样，你需要再次导入 CommonModule 或 SharedModule 模块。
但对于服务来说，有一些区别：
你仍然可以访问应用程序中提供的服务 (如Http和已定义的服务)。
延迟加载模块中定义的服务，只能在延迟加载的模块中使用，应用程序的其它模块是无法使用的。
