Ленивая загрузка в функциональных модулях - 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-editable: https://stackblitz.com/edit/angular-dqpbqa

Answer 1

HeroesModule не загружается из-за лени, потому что он импортирован в app.module.ts <= это ошибка </p>

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

Там HeroesModule изначально загружен и приложение имеет доступ к маршрутам heroes-routing.module.ts

Поэтому, когда вы перейдете к '', путь будет соответствовать пути '', определенному в вашем heroes-routing.module.ts, который отображает HeroesComponent