Angular 4: Multiple (named) router-outlets in a child route: supported?

Question

I have a master-detail setup with also another section for "editing" a list item, all on 1 landing-route (in my sample app, the route is /stuff). The detail component is populated using the default router-outlet, and is located at /stuff/:index . I am trying to send the HTML to another router-outlet for the edit part via route /stuff/:index/edit, yet Angular cannot seem to recognize the route.

I went ahead and put a generalized version of the situation on Bitbucket:

https://bitbucket.org/squirrelsareduck/angularrouting/

Anyways, the general error is this:

Error: Cannot match any routes. URL Segment: 'stuff/1/edit'

Most-relevant parts of the code:

Routes definition:

const routes: Routes = [   { path: 'stuff', component: AComponent, children:[     { path: ':index', component: BComponent},     { path: ':index/edit', component: EditComponent, outlet:'editsection'}   ]} ]; 

a.component.html:

<ul>   <app-listitem     *ngFor="let a of items; let indexOI = index;"     [index]="indexOI"   [contentOI]="a">   </app-listitem> </ul> <router-outlet></router-outlet> <router-outlet name="editsection"></router-outlet> 

b.component.html:

<p>   Detail section works! {{ index }}   <button     type="button"     [routerLink]="['edit',{outlets:{editsection:'/stuff/:index/edit'}}]">     Edit   </button> </p> 

edit.component.html (less relevant, but important to recognize)

<p>   edit section works! </p> 

Answer 1

Apply these changes in the b.component.html and it should work as expected.

<p>   Detail section works! {{ index }}  <button type="button"    [routerLink]="['/stuff',{outlets:{editsection:':index/edit'}}]">Edit</button> </p> 

For dynamic URL, using the routerLink, first, mention which route you want to go and then define the outlets and sub-routes as shown.