Routing to a named outlet from links in a navigation component fails only when using [routerLink]

Question

My application receives an error when I try to route to a named outlet using this link in html:

<a [routerLink]=.../> 

But the same route works using this.router.navigate from a ts handler function.

The following StackBlitz shows the issue: StackBlitzNavErrorExample

Click on "CarLink" which shows a simple navigation page, then notice how the button "Change" works but the link "GI Link" does not. But the routing looks the same for me. I want to use [routerLink]= so I can also use routerLinkActive="myClass" to hightlight the link selected.

I receive the following error even though I am not changing the route for the primary outlet:

ERROR
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'car/9'
Error: Cannot match any routes. URL Segment: 'car/9'

Answer 1

Since you have configured routes in root level, you have to move your named router outlet to app.component.html

app.module.ts

const routes: Routes = [
      { path: 'car/:id', component: CarComponent},
      { path: 'gi/:otherId', component: GIComponent, outlet: 'center'}
]

app.component.html

  <a [routerLink]="['car', '9']" > Car Link </a>
    <router-outlet></router-outlet>   
    <router-outlet name="center"></router-outlet>

ForkedExample

Answer 2

change to this in the html

<a [routerLink]="['',{ outlets: { center: ['gi', 10] } }]" > GI Link </a>