Angular 2 - Child routes load parent component
Angular is a SPA(Single Page Application) platform, so it will have a technique for single paging. You need to include <router-outlet>
into your PrivateComponent
to let Angular
loads child routes' components there. Router-outlet
shows the place where child component will be loaded.
For more see Defining Child Routes
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.