using multiple <router-outlet> in angular 7

Question

I am trying to configure my routes as below:

'' => layout page 'home => home' this has another router-outlet to switch views 'details/:id' child of /home, will be rendered by second router-outlet

My routing-module.ts

    [
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'home',
      component: HomeComponent,
      children: [

        {
          path: 'home/details/:id',
          component: ContactDetailsComponent,
          outlet: 'out2'
        },
       }
     ];

Parent-component.html

    <some-tags></some-tags>

<router-outlet></router-outlet>

Home-component.html

 <main class="d-flex">
  <app-contact-list></app-contact-list>
  <router-outlet name="out2"></router-outlet>
</main>

What I am missing here?, thanks in Advance :)

Answer 1

Figured it out

As I have all components in a single module i.e all my components are siblings of each other, So I don't need to add another named <router-outlet> this can be done by a single <router-outlet>.

previous routes worked, when I removed outlet from the routes and used lazy loaded routes.

Revised routes

   const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, children: [
      { path: ':id/details', component: Component2 },
      { path: ':id/update', component: Component3 },
      { path: 'add', component: Component4 },
    ] },
];