How to implement multi-level routing in Angular?

Question

I\'m working on a little project of mine in order to learn something more about Angular, but I really cannot figure out how to implement a multi-leveled routing.

I\'

Answer 1

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 },
    ]
 }];

Edit: if using rc4 and router 3.0.0-beta2 they have renamed terminal to pathMatch. So update the redirect route as below:

{ path: '', redirectTo: 'main-page', pathMatch: 'full'},