how can I implement multi level routing?

Satish

Hello,

I want to implement multi level routing in angular with same component.

example : /pages/:lev1/:lev2/:lev3/:lev4/:lev5/:lev6..... and so on.

there is no limit to add childs....

Please help me out in this.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Angular router considers a route with children as a non-terminal route and routing happens to terminal routes only. Angular router expects route to have a default entry for path: ''.
To resolve this issue you should add a redirect from the parent route to one of the child routes.
export const AdminRoutes: RouterConfig = [
{
    path: 'admin',
    component: AdminComponent,
    children: [
        { path: '', redirectTo: 'main-page', terminal: 'true' },
        { path: 'main-page', component: MainPageComponent,
        { path: 'settings', component: SettingsComponent },
    ]
}];
Satish5y ago
This will not help and also not a multi nesting routes.
My question related to N number of nesting routes.
Kiran Mohanty5y ago
1. const routes: Routes = [
2. { path: "search", component: SearchComponent },
3. {
4. path: "artist/:artistId",
5. component: ArtistComponent,
6. children: [
7. { path: "", redirectTo: "tracks", pathMatch: "full" },
8. { path: "albums", component: ArtistAlbumListComponent
9. children: [
10. { path: "tracks", component: ArtistTrackListComponent }
11. ]
12. }
13. ]
14. }
15. ];
Though i have never tried such nesting but i guess we can define like below.