Angular 2 - Child routes load parent component

Question

I am trying to get my routing to work in my Angular 2 application.

Here is the code I am using in the app.routes.ts file

export const ROUTES: Routes = [
  { path: '',      component: PublicComponent, data: { title: 'Heroes List' } },
  { path: 'home',  component: PublicComponent },
  { path: 'admin',  component: PrivateComponent, children: [
    { path: '', component: PrivateComponent },
    { path: 'account-settings', component: AccountSettingsComponent, children: [
      { path: '', component: UserInformationComponent},
      { path: 'user-information', component: UserInformationComponent},
      { path: 'companys-information', component: CompanysInformationComponent}
    ] },
  ] },
  { path: '**',    component: NoContentComponent },
];

Every time I try to navigate to one of the child routes it loads up the parent route.

So lets say for example I go to:-

http://localhost:4200/#/admin

It pulls in the correct component PrivateComponent.

But when I navigate to:-

http://localhost:4200/#/admin/account-settings

Or any children of the account settings it loads up the PrivateComponent and not the AccountSettingsComponent or UserInformationComponent as stated in the code you can see above.

Am I missing something in my code to get this to work?

The application was generated using Angular CLI.

Thank you in advance.

Answer 1

You will not need another <router-outlet> in the component.

Instead of defining a component in the parent route have a root path in children that points to the parent, like so:

{ path: 'admin', children: [
    { path: '', component: PrivateComponent },
    { path: 'account-settings', children: [
        { path: '', component: AccountSettingsComponent},
        { path: 'user-information', component: UserInformationComponent},
        { path: 'companys-information', component: CompanysInformationComponent}
    ] },
] },

On the other hand I can see the benefit of using an additional <router-outlet> if you want to display a common element for each child routes i.e. a header.