Component not initialising when going to child route

Question

I followed this helpful answer to setup routes with different layouts, but I've hit a problem when I tried to implement children to one of the pages.

When I go to any children of PagesConfig1.link, the Sidebar and Topbar components are not initialising, although they match all paths( path: '' ).

I tried to create a copy of them inside of the children array of PagesConfig1.link, but then they reinitialise, therefore losing state.

This is the code:

pages.ts
export const PagesConfig = [
    {
        name: 'Dashboard',
        link: 'dashboard',
        iconClass: 'pe-7s-graph',
    },
    {
        name: 'Stages',
        iconClass: 'pe-7s-albums',
        link: 'stages',
        children: [
            {
                name: 'Stage 1 - Review',
                link: '1'
            },
            {
                name: 'Stage 2 - Signatures',
                link: '2'
            },
            {
                name: 'Stage 3 - ASV',
                link: '3'
            },
            {
                name: 'Passed',
                link: 'passed'
            },
            {
                name: 'Fallen',
                link: 'fallen'
            },
            {
                name: 'Feedback',
                link: 'feedback'
            },
            {
                name: 'Archived',
                link: 'archived'
            },
            {
                name: 'Closed',
                link: 'closed'
            },
        ]
    },
    {
        name: 'Users',
        link: 'users',
        iconClass: 'pe-7s-users',
    },
    {
        name: 'Reports',
        link: 'reports',
        iconClass: 'pe-7s-display1',
    },
    {
        name: 'Debug',
        link: 'debug',
        iconClass: 'pe-7s-config',
    }
];

app.routing.ts

const appRoutes: Routes = [
    { path: '', canActivate: [LoginGuardService], children: [
        { path: '', redirectTo: '/' + PagesConfig[0].link, pathMatch: 'full' },

        { path: PagesConfig[0].link, component: DashboardComponent, data: {name: PagesConfig[0].name}, canActivate:[PermissionGuardService] },
        { path: PagesConfig[1].link, canActivate:[PermissionGuardService], children: [
            { path: '', redirectTo: '/' + PagesConfig[1].link + '/' + PagesConfig[1]['children'][0].link, pathMatch: 'full' },
            { path: PagesConfig[1]['children'][0].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][0].name } },
            { path: PagesConfig[1]['children'][1].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][1].name } },
            { path: PagesConfig[1]['children'][2].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][2].name } },
            { path: PagesConfig[1]['children'][3].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][3].name } },
            { path: PagesConfig[1]['children'][4].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][4].name } },
            { path: PagesConfig[1]['children'][5].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][5].name } },
            { path: PagesConfig[1]['children'][6].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][6].name } },
            { path: PagesConfig[1]['children'][7].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][7].name } }
        ]},
        { path: PagesConfig[2].link, component: UsersComponent,   data: {name: PagesConfig[2].name}, canActivate:[PermissionGuardService] },
        { path: PagesConfig[3].link, component: ReportsComponent, data: {name: PagesConfig[3].name}, canActivate:[PermissionGuardService] },
        { path: PagesConfig[4].link, component: DebugComponent,   data: {name: PagesConfig[4].link}, canActivate:[PermissionGuardService] },

        { path: '',          component: SidebarComponent,   outlet: 'sidebar'},
        { path: '',          component: TopBarComponent,    outlet: 'topbar'},
    ]},
    { path: 'login', children: [
        { path: '', component: LoginComponent }
    ]}
];

Does anybody know how to persist these components inside the children of the main routes? Thanks!

UPDATE I've fixed this issue by not using this app architecture at all, but instead using the ngSwitch directive to toggle components on or off depending on the active route received in the router.