企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 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`中是否有效: