Angular 工程化应用之模块（module）

NgModules 用于配置注入器和编译器，并帮你把那些相关的东西组织在一起。

NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。它会标出该模块自己的组件、指令和管道，通过 exports 属性公开其中的一部分，以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。

Angular 模块化

模块是组织应用和使用外部库扩展应用的最佳途径；
Angular 自己的库都是 NgModule，比如 FormsModule、HttpClientModule 和 RouterModule。很多第三方库也是 NgModule，比如 Material Design、 Ionic 和 AngularFire2。
NgModule 把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
模块还可以把服务加到应用中。这些服务可能是内部开发的（比如你自己写的），或者框架内置的（比如 Angular 的路由和 HTTP 客户端），或者外部模块（Material Design、Ionic）；
模块可以在应用启动时急性加载，也可以由路由器进行异步的惰性加载；

NgModule 的元素可以做什么？

声明某些组件、指令和管道属于这个模块；
公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们；
导入其它带有组件、指令和管道的模块，这些模块中的元件都是本模块所需的；
提供一些供应用中的其它组件使用的服务；

每个 Angular 应用都至少有一个模块，也就是根模块。你可以引导那个模块，以启动该应用。

为什么要自定义模块？

当我们开发一个应用程序时，功能单一只需要少量的组件就可以完成，此时根模块就是需要一并的加载这些组件；但是随着业务的发展，应用程序相应的改造和成长，就需要不断的重构和改造组件，有一些可能是特定的组件，他们之间有着密切相关的功能集，假如再按原来的方式一并的在根组件中挂载这些组件，那么该应用程序就显得比较杂乱，并且首次加载应用程序性能也随之降低，持续原有的方式就不足以体现 Angular 框架工程化的优势了，此时我们就需对组件进行模块化改造，以更好的体现Angular工程化实践。

组件模块化的优点（相对）：

项目（中大型）结构工程化明显，方便灵活扩展和结构复用。
可以在根组件中动态实现子组件懒加载，提升应用程序初始化性能和用户体验；
有密切相关的功能组件更加集中化或者组件模块化，对组件进行分类归并形成一个合理的模块；

Angular 模块分类：

如何在Angular项目中创建自定义模块以及实现路由模块的懒加载？

通过Angular指令在headerRout文件中创建一个名为modules的文件夹，并同时创建了一个名为user的模块；

PS E:\Angular\headRout> ng g module modules/user

将需要的子组件创建在user模块下，此时组件默认引入在子组件的根模块下；

PS E:\Angular\headRout> ng g component modules/user/components/nav

创建带路由模块的根组件；

PS E:\Angular\headRout> ng g component modules/user --routing

配置user模块中的根路由；

/* 路由配置 */
const routes: Routes = [
  {path:'user',component: UserComponent} 
];

创建模块中的服务；

PS E:\Angular\headRout> ng g service modules/user/services/head

在user模块的根模块中引入服务；

import { HeadService } from './services/head.service';

如何在项目根组件中使用模块中的组件（包括模块的根组件和子组件）；

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
//引入模块中的组件
import { UserComponent } from './user.component';
import { NavComponent } from './components/nav/nav.component';
//引入服务
import { HeadService } from './services/head.service';
 
@NgModule({
  //声明组件：User模块组件
  declarations: [ UserComponent, NavComponent],
  //暴露组件：将其他外部模块需要使用的组件用exports暴露出来，供外部其他组件使用
  exports:[UserComponent],
  //声明模块
  imports: [
    CommonModule
  ],
  //声明服务
  providers:[HeadService]
})
export class UserModule { }

在项目根模块中引入并声明自定义模块；

//引入自定义模块
import { UserModule } from './modules/user/user.module';
 
@NgModule({
  /* 声明组件 */
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    MiaoshaComponent,
    CouponComponent
  ],
  /* 声明模块 */
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserModule   //声明自定义模块
  ],
  /* 声明服务 */
  providers: [],
  /* 启动应用 */
  bootstrap: [AppComponent]
})
export class AppModule { }

根组件的html页面中挂载自定义模块；

<app-header></app-header>
<router-outlet></router-outlet>
<hr /><br />
//模块子组件挂载
<app-user></app-user>

根组件路由模块【app-routing.module.ts】实现自定义模块懒加载；

/* 配置路由 */
const routes: Routes = [
  {path:'user', loadChildren:'./modules/user.module#UserModule'}, /* 载入自定义模块，#UserModule是自定义模块的类名称 */
  {path:'', pathMatch:'full', redirectTo:'user'} /* 此处是配置默加载认模块，如果存在多个自定义模块 */
];

以上就是在Angular项目中自定义模块的全部过程分析。