Angular入门到精通系列教程（11）- 模块(NgModule)，延迟加载模块

客官°小女子只卖身不卖艺 2023-01-10 14:48 105阅读 0赞

### 文章目录 ###

*  1. 摘要
 *  2. NgModule举例、说明
 *  3. Angular CLI生成模块
 *  4. 延迟加载模块
 *  5. 总结

> 环境:
> 
>  *  Angular CLI: 11.0.6
>  *  Angular: 11.0.7
>  *  Node: 12.18.3
>  *  npm : 6.14.6
>  *  IDE: Visual Studio Code

# 1. 摘要 #

模块(NgModule)是Angular的核心概念之一。模块(NgModule)用于组织业务代码，按照自己的业务场景，把组件、服务、路由打包到模块里面。

模块(NgModule)的主要作用：

1.  NgModule 组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起。
2.  NgModule 用来控制组件、指令、管道等的可见性，处于同一个NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到NgModule 导出（exports）的内容。这样就实现了封装，只暴露希望暴露的组件、服务给调用者。
3.  NgModule 是 @angular/cli 打包的最小单位。打包的时候，@angular/cli 会检查所有 @NgModule 和路由配置，如果你配置了异步模块，cli 会自动把模块切分成独立的 chunk（块）。在 Angular 里面，打包和切分的动作是 @angular/cli 自动处理的，不需要你干预。当然，如果需要，你也可以修改angular的编译配置，基于Webpack 配一个环境出来，自定义打包规则。
4.  NgModule 是 Router 进行异步加载的最小单位，Router 能加载的最小单位是模块，而不是组件。当然，也可以一个模块里面只放一个组件是。

# 2. NgModule举例、说明 #

前文说过，Angular中任何的Component、service，都必须属于一个NgModule。所以，使用AngularCLI生成的框架程序，自动生成的组件，也是属于一个Component的，并且标记为启动模块。  
这样，angular站点启动后，会以这个模块为入口，根据配置加载各个模块。

下面以默认生成的启动模块为例，进行解释：

@NgModule({ 
      declarations: [
        AppComponent,
        MyComponentComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {  }

*  declarations，用来放组件、指令、管道的声明；
 *  imports，用来导入外部模块。比如当前模块需要调用其他模块的组件，需要加入到这里。比如上面例子，导入了Browser和Routing 2个模块。
 *  providers，需要使用的第三方或者其他模块的Service 都放在这里；
 *  bootstrap，定义启动组件。 一个可以启动的Angular项目（如果只是一个Library除外），需要定义一个启动组件。
 *  exports, 声明的组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。换句话说，其他模块想用本模块中定义的内容，需要在这里声明。
 *  entryComponents， 如果其他模块想要动态加载本模块中的组件到视图中， 那么，这些组件需要写入entryComponents。

# 3. Angular CLI生成模块 #

AngularCLI是一个很好很强大的工具集，可以帮助我们生成很多基础代码、文件， 包括创建一个模块，并且可以制定参数。

ng generate module <name> [options]

详情参考https://angular.io/cli/generate\#module。

几个简单的例子：

1.  创建feature1模块： `ng generate module feature1`
2.  创建feature2模块， 并且带路由：`ng generate module feature2 --routing`
3.  创建一个延迟加载的feature3模块(延迟加载模块，参考下面章节)： `ng generate module feature3 --route feature3 --module app.module`

> 说明： `ng generate module xxx` 可以简写为 `ng g m xxx`

# 4. 延迟加载模块 #

延迟加载使得应用程序在启动时不被载入，而是结合路由配置，在需要时才动态加载相应模块。这样 Angular 就不需要在第一个界面从服务器下载所有的文件，直到请求它，才下载相应的模块。这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助，而且它可以很容易设置。

举例来说，上文创建了3个模块，主程序模块以及feature1、feature2会被打成一个包（js），feature3会被单独打一个包（js），当用户访问/feature3/\* 的地址后，才会加载feature3这个包（js），否则永远不会请求、加载feature3的模块，从而提高性能（首页加载时间）。当一个项目大到一定程度时，最好考虑把某些模块设置为延迟加载模块。

延迟加载的路由定义（angular CLI会自动生成）：

// src/app/app-routing.module.ts
    import {  NgModule } from '@angular/core';
    import {  Routes, RouterModule } from '@angular/router';
    
    const routes: Routes = [
      { 
        path: 'feature3',
        loadChildren: () =>
          import('./feature3/feature3.module').then((m) => m.Feature3Module),
      },
    ];
    
    @NgModule({ 
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
    })
    export class AppRoutingModule { }

最后复习一下生成延迟加载模块的命令`ng generate module feature3 --route feature3 --module app.module`，或者简写为 `ng g m feature3 --route feature3 --module app.module`。

# 5. 总结 #

1.  Angular项目，就是模块（NgModule）的一个集合，任组件、服务等必须包含在一个模块中。
2.  延迟加载模块用于提高首页加载性能。
3.  Angular CLI命令，生成模块。

> \---------------- END ----------------

> ======================