Nested child routes combined with named routers are not supported in Angular 2

Question

Nested child routes combined with named routers are not supported in Angular 2

Encoder applications,

I have the following routing table:

const routes: Routes = [ { path: '', redirectTo: 'main', pathMatch: 'full' }, { path: 'main', component: MainComponent, children: [ { path: 'spaceoverview', component: SpaceOverviewComponent, outlet: 'mainview' }, { path: 'create-menu', component: CreateMenuComponent, outlet: 'sidebar' }, { path: 'create-space', component: CreateSpaceComponent, outlet: 'mainview' }, { path: 'update-menu/:id', component: UpdateMenuComponent, outlet: 'sidebar' }, { path: 'update-space/:id', component: UpdateSpaceComponent, outlet: 'mainview' }, { path: 'empty-menu', component: EmptyMenuComponent, outlet: 'sidebar' }, { path: 'empty-main', component: EmptyMainComponent, outlet: 'mainview' }, { path: 'update-categories', component: ChangeCategoriesComponent, outlet: 'mainview' }, { path: 'permissions/:id', component: TestComponent, outlet: 'mainview', children: [ { path: 'create-reader/:id', component: CreateReaderComponent, outlet: 'top' }, { path: 'reader-overview/:id', component: ReaderOverviewComponent, outlet: 'bottom' }, { path: 'empty-top', component: EmptyTopComponent, outlet: 'top' }, { path: 'empty-bottom', component: EmptyBottomComponent, outlet: 'bottom' } ] } ] }, { path: '**', component: PageNotFoundComponent } ];

These are all child routes of main, permissions, except that it has its own child routes.

Unfortunately, I cannot get it to work. I've already tried a lot of things ...

Loading a non-nested child:

 this.router.navigate(['/main', { outlets: { 'sidebar': ['update-menu', id], 'mainview': ['update-space', id] } }]);

no problem, the corresponding url becomes:

 http://localhost:4200/main/(sidebar:update-menu/123//mainview:update-space/123)

But when I try to load a child permission route with named routers, for example:

 this.router.navigate(['/main', { outlets: { 'mainview': ['/permissions', this.id, { outlets: { 'top': ['create-reader'], 'bottom': ['reader-overview'] } }], 'sidebar': ['update-menu', this.id] } }]);