Angular 12: router-outlet在升级为动态导入路由器模块后不再渲染组件

Question

我已经改变了我的路由器导入方式

loadChildren: './lazy/lazy.module#LazyModule

我已经使用了动态导入来加载router模块。

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

现在，我没有渲染组件，但同时页眉和页脚，组件加载良好，因为它不是从路由器出口加载的。

app.component.html

<header-component>.  //rendering fine
<router-outlet></router-outlet>. // I am seeing it gets routed in the address bar, but the component is not getting rendering.
<footer-component> //rendering fine 

对于上述问题，我在控制台或vscode上没有得到任何错误。我如何调试这个问题，而组件是空白的，虽然它是正确路由的，我也在网络选项卡中得到这个组件的API响应，API响应没有在屏幕上呈现为HTML。

这个问题发生在我从Angular 11升级到12版本的时候。

我的详细代码结构与此文档非常相似https://remotestack.io/angular-lazy-load-modules-with-dynamic-module-imports-example/

Answer 1

@JSBeginner请分享您的LazyModule代码，似乎您需要指定如何在LazyModule模块中配置路由

例如

const routes: Routes = [
{
path: '',
component: LazyComponent],
},
];

并在lazyModule

的导入中添加这行代码

RouterModule.forChild(routes),