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.
For that nested routes, you just need to add <router-outlet></router-outlet>
in your Child1Component