# 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`中是否有效：