основной компонент отображается дважды на выходе маршрутизатора после реализации модулей ленивой загрузки - Angular 8

Вот ожидаемый интерфейс:

Но реальный пользовательский интерфейс рендерится

Вот приложение-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 (у которого есть основной выход маршрутизатора)

<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 Здесь у меня есть еще один выход роутера для добавления/обновления/удаления поста

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

Проблема здесь, в вышеуказанном выходе маршрутизатора тот же компонент снова отображается, кто-нибудь, пожалуйста, помогите мне решить?