how to use router-outlet in a proper way

Question

Hi I have following code: app.routing.module

 const routes: Routes = [   
 {path: '', redirectTo:'/head', pathMatch:'full'},
 {path:'head',component: HeadComponent},
 {path:'main',component: MainComponent},
 ];

and in head I have:

<router-outlet></router-outlet>

which should navigate to main automically but it doesn't. I need to do empty head which is root of the all components.regards

Answer 1

A router outlet in head is only going to render children of head, which you have none of.

Your routes are set up to automatically render head in a router outlet of the app component. Head has no children so it will not render main. You need to add main in the children of head.

const routes: Routes = [   
  {path: '', redirectTo:'/head', pathMatch:'full'},
  {
    path:'head',
    component: HeadComponent,
    children: [
      {path:'',component: MainComponent}
    ]
  }
];