I have changed my router import from old way of importing
loadChildren: './lazy/lazy.module#LazyModule
I have used dynamic import to load the router module.
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
Now, my is not rendering the components but at the same time header and footer, component are loading fine since it is not loaded from the router-outlet.
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
I don't get any error on the console or vscode for the above issue. How do I debug this issue while the components are blank though it is routed correctly also I am getting an API response for this component in the network tab the API response is not get rendered on the screen as HTML.
This issue happened to me while I am upgrading from Angular 11 to the 12 version.
My detailed code structure is pretty same like this document https://remotestack.io/angular-lazy-load-modules-with-dynamic-module-imports-example/
@JSBeginner please share your LazyModule code, and it seems you need to specify how you configured routes in the LazyModule module
for example
const routes: Routes = [
{
path: '',
component: LazyComponent],
},
];
and add this line of code on imports of lazyModule
RouterModule.forChild(routes),