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?

Answer 1

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.