[英]Lazy-loading in feature modules- Angular
The app stays here: https://angular-dqpbqa.stackblitz.io .该应用程序保留在此处: https : //angular-dqpbqa.stackblitz.io 。 what mistake am i doing?
我在做什么错误? and it also loads heroes-list initially, but the path is ''.
并且它最初也会加载英雄列表,但路径是''。
lazyloading of feature modules is not working.功能模块的延迟加载不起作用。 i have created separate routing in each feature module.
我在每个功能模块中创建了单独的路由。 dynamically loading the module using loadchildren property
使用 loadchildren 属性动态加载模块
const routes: Routes = [
{ path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(mod =>
mod.DashboardModule)
},
{ path: 'heroes',
loadChildren: () => import('./heroes/heroes.module').then(mod =>
mod.HeroesModule)
},
{ path: 'detail/:id',
loadChildren: () => import('./hero-detail/hero-detail.module').then(mod
=> mod.HeroDetailModule)
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
stackblitz-editable: https://stackblitz.com/edit/angular-dqpbqa stackblitz-editable: https://stackblitz.com/edit/angular-dqpbqa
HeroesModule is not lazy-loaded because it is imported in app.module.ts
<= that's the mistake HeroesModule 不是延迟加载的,因为它是在
app.module.ts
导入的 <= 这是错误的
@NgModule({
imports: [ /* ... */ HeroesModule, /* ... */ ]
})
export class AppModule { }
There, HeroesModule is initially loaded and the app has access to the routes of heroes-routing.module.ts
在那里,HeroesModule 被初始加载并且应用程序可以访问 heros
heroes-routing.module.ts
So when you navigate to ''
, the path will match the path ''
defined in your heroes-routing.module.ts
which display the HeroesComponent
因此,当您导航到
''
,该路径将匹配您的HeroesComponent
heroes-routing.module.ts
定义的路径''
显示HeroesComponent
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.