路由預加載:在應用啟動后,會在后臺預先加載某個特征模塊。 >[danger] CanLoad路由守衛會阻塞預加載,因此不要在使用CanLoad路由守衛的模塊中使用預加載。 ## 實現預加載 一、預加載所有特征模塊 > 要為所有惰性加載模塊啟用預加載功能，請從 Angular 的路由模塊中導入 PreloadAllModules。 > RouterModule.forRoot 方法的第二個參數接受一個附加配置選項對象。 preloadingStrategy 就是其中之一。 把 PreloadAllModules 添加到 forRoot 調用中： ``` RouterModule.forRoot( appRoutes, { enableTracing: true, // <-- debugging purposes only preloadingStrategy: PreloadAllModules //添加配置項實現預加載 } ) ``` 二、使用自定義的預加載策略 >[info] 預加載所有的特征模塊顯然不夠靈活,通過使用自定義預加載策略實現某個特征模塊實現預加載。 1.創建一個服務實現自定義預加載 > 在CLI輸入命令：ng generate service selective-preloading-strategy > 輸入命令后創建的服務`src/app/selective-preloading-strategy.service.ts` ``` import { Injectable } from '@angular/core'; import { PreloadingStrategy, Route } from '@angular/router'; import { Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class SelectivePreloadingStrategyService implements PreloadingStrategy { preloadedModules: string[] = []; preload(route: Route, load: () => Observable<any>): Observable<any> { if (route.data && route.data['preload']) { //將路由路徑添加到預加載的模塊數組中。 this.preloadedModules.push(route.path); return load(); } else { return of(null); } } } ``` 2.在路由配置中添加預加載 ``` { path: 'crisis-center', loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule', data: { preload: true } //路由預加載 }, ```