路由预加载:在应用启动后,会在后台预先加载某个特征模块。 >[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 } //路由预加载 }, ```