Angular项目实战Angular5项目模块划分

Posted 2022-03-31 博读代码

相信很多人在 Angular5 的项目前期，用得很流畅。但随着项目变得庞大且复杂性增加，就会出现首页加载慢的问题。这是因为把所有页面都放在一个模块里，导致首页载入相当于把整个项目加载进来，所以才会觉得越来越慢。

因此，我们需要根据项目业务情况来划分不同的功能模块，按需加载模块，来提升用户体验。

下面根据之前所做的项目情况来分享一下进行模块划分的过程，由于所做的项目模块比较多，所以做了简化版的 demo，以便截图和讲解。

我的项目目录结构如下：

主要包括（登录、注册、首页、用户管理），其中登录、注册、首页这3个页面公用头部和尾部的组件。

页面布局结构如下：

​下面是 app.module.ts 文件的主要代码：​

下面是 app-routing.module.ts 文件的主要代码：

根据业务的发展来看，用户管理后期是会持续迭代功能的，首页跟登录页用户使用的概率比较高，而注册页面的使用率相对低，因此改动的概率较小。

由此，我把注册和用户管理划分为2个特性模块，首页跟登录页留着主模块中。

1、划分用户管理模块

在 app 文件中，新建一个 load-module 的文件夹，然后在里面创建用户管理模块的路由配置模块 customers-routing.module，代码如下：

这里需要注意，我使用了 RouterModule.forChild() 而不是RouterModule.forRoot()。RouterModule 对象提供了两个静态的方法 :forRoot() 和 forChild() 来配置路由信息。

RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。即根模块中使用 forRoot()，子模块中使用 forChild()。

在 load-module 的文件中，创建用户管理模块的声明模块 customers.module，把用户管理模块所用得到的指令/管道/组件的声明都迁移过来，代码如下：

这里需要注意的是，引入了一个 CommonModule 模块，CommonModule 提供了很多应用程序中常用的指令，包括 NgIf 和 NgFor 等。更准确地说，NgIf 等指令是来自 @angular/common 的 CommonModule 中声明的。

我们在根模块 AppModule 中导入了 BrowserModule 模块，BrowserModule 导入了CommonModule 并且重新导出了它。最终的效果是：只要导入 BrowserModule 就自动获得了 CommonModule 中的指令。导入 BrowserModule 会让该模块公开的所有组件、指令和管道在 AppModule 下的任何组件模板中直接可用，而不需要额外的繁琐步骤。

但在其它任何模块中都不要导入 BrowserModule ，特性模块和惰性加载模块应该改成导入 CommonModule，它们不需要重新初始化全应用级的提供商。

如果你在惰性加载模块中导入 BrowserModule，Angular 就会抛出一个错误：大概的提示是BrowserModule 模块已经下载了，如果想使用 ng 自带的指令/管道，引入CommonModule。

1.1划分管道共享模块

由于考虑到用户模块后期变得更复杂，可能会根据情况再划分子模块，而里面用的的管道可能会被多个子模块使用到，所以把管道分离出来做一个共享模块以备以后的多个子模块公用。

看到这里，可能有些人会有个疑惑：什么时候该分离共享模块？

当一个组件/指令/管道，被多个模块使用到的时候，就应该分离到共享模块中，然后再在各个子模块中引入这个共享模块。因为在 ng5 中，如果要在模块中使用一个组件/指令/管道，必须要做声明，而且只能在一个模块中声明。在共享模块中声明公用的组件/指令/管道，导出给别的模块使用。

想了解更多关于共享模块的知识，请点击​​传送门​​。

在 load-module 的文件中，创建管道共享模块 share-pipe.module，把管道的声明迁移过来，代码如下：

​在用户管理模块的声明模块 customers.module 中引入共享模块 share -pipe.module，代码如下：​

1.2 修改根模块路由

在根模块路由 AppRoutingModule 中配置用户管理模块 CustomersModule 的路由信息，代码如下：

这里使用到了懒加载 LoadChildren 属性。这里没有将 CustomersModule 导入到AppModule 中，而是通过 loadChildren 属性，告诉 Angular 路由依据 loadChildren 属性配置的路径去加载 CustomersModule 模块。

这就是模块懒加载功能的具体应用，当用户访问 /customers/** 路径的时候，才会加载对应的 CustomersModule 模块，这减少了应用启动时加载资源的大小。

我们再看看现在的根模块的声明模块在迁移了用户模块之后怎么样了，代码如下：

把用户模块这个大块头划分出去之后，首页加载速度明显变快了，接下来我们继续划分注册模板吧。

‍

2、划分注册模块管理模块

在 load-module 的文件中，创建注册模块的路由配置模块 regist-routing.module，代码如下：

注册模块主要用到3个组件：regist、head、foot，其中 head、foot 会被主模块中的首页和登录页用到，所以需要把这 head、foot 两个组件分离到一个共享模块。

2.1 划分组件共享模块

在 load-module 的文件中，创建组件共享模块 share-component.module，把组件的声明迁移过来，代码如下：

在 load-module 的文件中，创建注册模块 regist.module，把组件的声明迁移过来，并且引入共享组件模块 ShareComponentModule，代码如下：

2.2 修改根模块路由

在根模块路由 AppRoutingModule 中配置用户管理模块 RegistModule 的路由信息，代码如下：

最后我们看看根模块的声明模块迁移了用户模块之后怎么样了，代码如下：

到此，我们这一次划分模块的任务就完成了。

后期的话还可以进一步优化，比如懒加载模块过大，加载过程有段卡顿时间，这里可以用 ng5 的动画做过度提升用户体验。另外，可以根据需求把按需加载改成预加载，后续有机会再补充预加载的内容。

下期给大家分享更多实战中的点滴，如果大家喜欢 Angular 或对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！