我們分別按預期的設想開發了前臺和后臺、并在開發的過程中分別啟用了單元測試來保障代碼的可靠性。但在最終兩者合并工作以前，誰都不敢斷言他們的配置必然是成功的。這時候就需要最終的**集成測試**來完成此項保障工作，**集成測試**故名思義便是把分散的多個模塊集成在一起做個整體的測試。 ## 定制路由 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) | - |