功能模块中的延迟加载 - 角度

Question

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

功能模块的延迟加载不起作用。 我在每个功能模块中创建了单独的路由。 使用 loadchild 属性动态加载模块

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 { }                             

堆栈闪电战可编辑：https://stackblitz.com/edit/angular-dqpbqa

Answer 1

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

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

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

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