main component rendered twice in the Router outlet after implementing lazy load modules - Angular 8

Question

Here is the expected UI:

But the actual UI is rendering

Here is the app-routing.module.ts

const routes: Routes=[
{path: '',component: HomeComponent},
{path:'counter',
loadChildren:() => import('./counter/counter.module').then((m)=> m.CounterModule)
},
{path:'posts', component: PostslistComponent,

loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),

}
];

========================================================

Post.module.ts

const routes:Routes=[
{path:'', component: PostslistComponent,
children:[
{path:'update/:id', component:UpdatepostComponent,
   
},
{path:'add',component:AddpostComponent, 
},
  
]
}
];

===================================================== app.component.html (which has main router outlet)

<div class="container">
<app-header></app-header>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
  
</div>
</div>
</div>

========================================================= postslist.component.html Here I have another router outlet to add / update /delete the post

<div class="col-md-4">
<router-outlet></router-outlet>
     
</div>

The problem is here, in the above router outlet the same component is being rendered again, would anyone pls help me to resolve?

Liu Zhang Liu Zhang · Accepted Answer · 2021-04-01T16:23:55

This is because you imported PostListComponent at parent routing. Just remove it, as well as remove your PostModule import from your parent module @ngModule decorator.

Simply it must be

{
  path:'posts',
  loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),
}

As long as your code was working, it means, you imported PostModule to your parent module, that must be deleted.

main component rendered twice in the Router outlet after implementing lazy load modules - Angular 8

2 Answers