Angular routing: 3 level hierarchy - parent child child

Question

• App component (router-outlet)
  • Parent 1 ---- Level 1
    • Child 1 ---- Level 2
      • Child 1 ---- Level 3
      • Child 2 ---- Level 3
      • Child 3 ---- Level 3

This is the scenario for the nested routing in my angular project. So, my question is Level 3 nesting possible in angular cause I have already tried to access level three child but it's not working.

const routes: Routes = [
  { path: '', redirectTo: 'Parent1/Child1', pathMatch: 'full' },
  {
    path: 'Parent1', component: Parent1Component,
    children: [
      { path: 'Child1', component: Child1Component },
      { path: 'Child2', component: Child2Component },
      { path: 'Child3', component: Child3Component },
      { path: 'Child4', component: Child4Component },
      { path: 'Child5', component: Child5Component },
    ]
  },
  {
    path: 'Parent2', component: Parent2Component,
  },
  {
    path: 'Parent3', component: Parent3Component,
  },
  {
    path: 'Parent4', component: Parent4Component,
  },
  {
    path: 'Parent5', component: Parent5Component,
    children: [
      {
        path: 'Child1', component: Child1Component,
        children: [
          { path: 'Child1', component: Child1Component },
          { path: 'Child2', component: Child2Component },
        ]
      },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Parent1>Child1 are working properly.

Parent5>Child1>Child1 are not working.

Answer 1

For that nested routes, you just need to add <router-outlet></router-outlet> in your Child1Component