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