2

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'
plex4r
  • 243
  • 1
  • 2
  • 15

2 Answers2

3

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

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
1

change to this in the html

<a [routerLink]="['',{ outlets: { center: ['gi', 10] } }]" > GI Link </a>
B.k
  • 117
  • 1
  • 10
  • Please don't post only code as an answer, but include an explanation what your code does and how it solves the problem of the question. Answers with an explanation are generally of higher quality and more likely to attract upvotes. – Mark Rotteveel Sep 26 '19 at 17:38