时间戳

首页 > 解决方案 > 特性模块中的延迟加载 - Angular

angular - 特性模块中的延迟加载 - Angular

问题描述

该应用程序留在这里：https ://angular-dqpbqa.stackblitz.io 。我在做什么错？它最初也会加载英雄列表，但路径是''。

功能模块的延迟加载不起作用。我在每个功能模块中创建了单独的路由。使用 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 可编辑：https ://stackblitz.com/edit/angular-dqpbqa

标签： angularlazy-loadingdynamic-feature-module

解决方案

HeroesModule 不是延迟加载的，因为它是在app.module.ts<= 中导入的，这是错误的

@NgModule({
  imports: [ /* ... */ HeroesModule, /* ... */ ]
})
export class AppModule { }

在那里，HeroesModule 最初被加载并且应用程序可以访问heroes-routing.module.ts

因此，当您导航到 时''，该路径将与''您在heroes-routing.module.ts其中显示的路径匹配HeroesComponent

推荐阅读