功能模块中的延迟加载- Angular

Question

应用程序停留在这里：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

Answer 1

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

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

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

的路由

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

功能模块中的延迟加载- Angular

Lazy-loading in feature modules- Angular

lazy-loading

angular

dynamic-feature-module