我们分别按预期的设想开发了前台和后台、并在开发的过程中分别启用了单元测试来保障代码的可靠性。但在最终两者合并工作以前，谁都不敢断言他们的配置必然是成功的。这时候就需要最终的**集成测试**来完成此项保障工作，**集成测试**故名思义便是把分散的多个模块集成在一起做个整体的测试。 ## 定制路由 app-routing.module.ts ``` { path: 'klass', loadChildren: () => import('./klass/klass.module').then(mod => mod.KlassModule) }, { path: 'student', ① loadChildren: () => import('./student/student.module').then(mod => mod.StudentModule) ② } ]; ``` * ① 路径student * ② 惰性加载模块 student/student-routing.module.ts ``` const routes: Routes = [ { path: 'add', component: AddComponent } ]; @NgModule({ imports: [ RouterModule.forChild(routes) ① ], exports: [RouterModule] }) export class StudentRoutingModule { } ``` * ① 声明为子路由 ## 测试 打开浏览器并启用控制台，打开[http://localhost:4200/student/add](http://localhost:4200/student/add)，报如下错误：  这是由于我们仅仅在组件的测试中import了依赖的模块，但却未在学生模块中引用（我们是多么地希望能够对模块进行单元测试而避免集成测试遇到的此类问题！） 我们来到student/add/add.component.spec.ts中，查看该单元测试的依赖项，并将其对应加入到StudentModule中。 student/sudent.module.ts ``` @NgModule({ declarations: [AddComponent, KlassSelectComponent], imports: [ CommonModule, StudentRoutingModule, ReactiveFormsModule, ① CoreModule ② ] }) export class StudentModule { } ``` * ① 响应式表单 * ② 核心模块（公共选择组件） > 以下动图中标题有误，最后的“编辑教师”应该为“添加学生”  😁 测试完美通过！😁 # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.5.10](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.5.10) | - |