路由預加載:在應用啟動后,會在后臺預先加載某個特征模塊。
>[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 } //路由預加載
},
```
- 目錄結構
- 架構
- 指令
- 數據綁定
- 結構性指令
- 屬性型指令
- 自定義指令
- 模板引用變量
- 屬性綁定
- 事件綁定
- 組件
- 組件交互
- 管道
- 自定義管道
- 動態組件
- 變量檢測機制
- 組件生命周期
- 路由
- 路由配置
- 路由導航
- 路由傳值
- 父子路由
- 路由事件
- 頂級路由和特征路由
- 多重路由
- 路由守衛
- 路由守衛-簡單理解
- 路由惰性加載
- 路由預加載
- 路由動畫
- 網絡請求
- GET請求
- POST請求
- JSOP請求
- 封裝的http請求
- http攔截器
- 表單
- 響應式表單
- 驅動式表單
- CLI命令
- 啟動應用
- 創建項目
- 創建組件
- 創建服務
- 創建路由守衛
- 創建特征模塊
- 創建自定義指令
- 創建自定義管道
- 相關概念
- 急性加載
- 惰性加載
- 特征模塊
- 常見問題
- 全局的Angular CLI大于本地的Angular CLI
- 包體優化