# 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 及 相关资源