# https://alligator.io/angular/lazy-loading/
主路由 `routes.ts`:
注意使用`loadChildren`的語法非常奇怪:首先是模塊的路徑,然后是`#`,然后是模塊的類名。這將指示路由器模塊應該延遲加載,并告訴它在哪里找到模塊。
```ts
...
{ path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
...
```
功能模塊 `shop/shop.routing.ts`:
```ts
...
export const routes: Routes = [
{ path: '', component: CartComponent },
{ path: 'checkout', component: CheckoutComponent },
{ path: 'confirm', component: ConfirmComponent },
];
```
功能模塊 `shop/shop.module.ts`:
在功能模塊本身中,您將使用`RouterModule` 的`forChild`方法而不是 `forRoot` 包含路由:
```ts
...
RouterModule.forChild(routes)
...
export class ShopModule{ }
```
最后 您就可以使用`routerLink`指令導航到`/ shop`,`/shop/checkout` 或 `/shop/confirm`最后 。
通過`F12 開發者工具`查看在導航到 惰性加載模塊的路由時 是否加載了一個新`chunk`,驗證延遲加載在`network`中是否有效:
- PWA 概念
- Immutable
- Angular 基礎概念
- 入門參考
- Angular 更新總結
- Angular 生態系統
- Rx.js
- Ngrx
- CQRS/ES 模式
- Angular 5 詳解
- 測試
- 定義共享模塊
- 懶路由加載
- angular組件
- 雙向綁定及變化檢測
- 樣式
- ionic 3詳解
- ionic3
- ionic 插件
- Ionic 添加動畫
- Ghost-Loading
- 打包發布
- Android上架國內應用市場流程
- 總結
- 文章
- 問題合集
- Cordova
- 插件開發指南
- Android插件開發指南-官網
- IOS插件開發指南-官網
- Hooks 編寫
- 橋接技術
- ===cordova插件收集===
- 相關主題-官網
- 實戰-自定義插件流程
- UI 及 相關資源