用Angular2开发一个大型的应用，我们通常都需要分模块进行开发。例如将某一个功能的相关页面和功能放在一个模块里面，这样既可以实现系统的松耦合，给开发和后期的维护带来很大的便利。同时，对于子模块，我们还可以使用延时加载，这样可以减少初始加载的文件的大小。在这篇文章中，我们就来看看在Angular2框架下怎么实现子模块及其延时加载。
可以在这里查看本文使用的实例 。该实例基于上篇文章Angular2使用Guard和Resolve进行验证和权限控制 所用的实例，并在它基础上添加了一个lazy的模块，以及将现有的todo模块配置成延时加载方式。
为了体现启用延时加载前后的包的大小变化，以及启用压缩后的变化，在这个教程里面，使用了angular-cli创建项目脚手架，并用它来进行测试和打包。有关angular-cli的使用请查看 官网 。在这篇文章我们使用的angular-cli的版本是1.0.0-beta.21。如果你使用的是别的版本，可能结果就会不一样。甚至有些错误，我们在最后会说明当前版本angular-cli的bug。
模块设计
在开发Angular2应用时，像组件设计、路由设计以外，对于一个较大型的应用，我们还需要设计模块。例如，将一个应用分成几个功能模块，以及有哪些公用模块。公用模块里面应该放公用的service类，例如权限验证、登录、获取用户信息、全局的错误处理、工具类等，还有封装的指令或组件。而在某一个功能模块里面，只处理这个模块里面的业务，尽量不和其他模块交互。
拿之前教程中的TodoList应用来说，只有home页面和2个todo页面，我们把todo相关的功能放在一个子模块里面，为了演示，又加了一个简单的名字叫lazy的模块。我们将把todo模块和lazy模块配置成延时加载的模块。
子模块开发
接下来再看看子模块的开发。其实在之前的例子中，就把todo相关的组件放在了一个模块里面。但是却没有强调子模块开发需要注意的地方，甚至有些配置可能没有采用子模块的方式进行配置。这里，我们就主要说明一下需要注意的地方，如果要查看完整的代码，请参考 实例源代码 。
子模块路由
首先需要注意的是路由。在之前的例子中，我们把todo相关的路由定义在一个文件中，然后在app的路由定义中把所有路由合并到一起。 todo.routes.ts 的内容如下：
// 省略import export const TodoRoutes: Route[] = [ { path: 'todo', canActivateChild: [MyTodoGuard], children: [ { path: 'list', component: TodoListComponent, resolve: { todos: MyTodoResolver } }, { path: 'detail/:id', component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ] } ] } ];
然后在 app.routes.ts 中定义一个路由模块：
const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, ...TodoRoutes // 这里就是将TodoRoutes列表里的内容合并到routes ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export classAppRoutingModule{ }
最后，在AppModule里面引入这个路由模块。
这种方式实现的路由无法实现子模块的延时加载，要实现延时加载，首先要将todo模块的路由修改成子路由模块，也就是要修改 todo.routes.ts ：
// 省略import export const TodoRoutes: Route[] = [ { path: 'todo', canActivateChild: [MyTodoGuard], children: [ { path: 'list', component: TodoListComponent, resolve: { todos: MyTodoResolver } }, { path: 'detail/:id', component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ] } ] } ]; // 通过下面的方式定义了一个子路由模块 @NgModule({ imports: [ RouterModule.forChild(TodoRoutes) ], exports: [ RouterModule ] }) export classTodoRoutingModule{ }
这里，我们定义了一个子路由模块， TodoRoutingModule ，它使用 RouterModule.forChild(TodoRoutes) 来创建。跟整个App的路由模块比较的话，主路由模块使用 RouterModule.forRoot(routes) 来定义。
定义好了子路由模块，我们就在子模块里面引入它既可：
// 省略import @NgModule({ imports: [CommonModule, FormsModule, TodoRoutingModule ], declarations: [TodoListComponent, TodoDetailComponent, TodoItemComponent], providers: [TodoService, MyTodoResolver, MyTodoGuard, CanLeaveTodoDetailGuard] }) export classTodoModule{}
这样，我们就定义好了一个子模块。当用户打开 /todo/list 或 /todo/detail/* 时，这个子模块里面的相关页面就会展示，它也不会跟其他模块有任何交互。也就是说，进入和离开这个子模块，都是通过路由跳转实现。这个子模块也是完全独立的，可以独立开发，也可以很容易就用到其他应用里面。
延时加载子模块