Angular "Error: Cannot match any routes. URL Segment" when using [routerLink], but it works with this.router.navigate

Question

I have a primary and a named outlet in my application defined as follows:

<router-outlet></router-outlet>
<router-outlet name="center"></router-outlet>

I have defined a route to be used with this center component in my app-routing:

const routes: Routes = [
{ path: 'login', component: LoginComponent, outlet: 'center' },   
{ path: 'home',  component: HomeComponent },
{ path: 'car',       component: BaseComponent },
{ path: 'car/:id',   component: CarComponent },
{ path: 'gi/:otherId',component:GIComponent, outlet: 'center' },
{ path: '', pathMatch: 'full', redirectTo: 'home' }];

I am defining a link in Car.component.html to route a GI component to the named outlet. But this link gives me an error:

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

However, I am able to create a function to perform this navigation using router.navigate():

<a [routerLink]="" (click)="routeGI()" > Gi Link  </a>

...and the associated function in my Car.Component.ts file:

routeGI() { this.router.navigate([{ outlets: {center: ['gi', this.myObject.id]  }}]);

So the function routeGI() works like a charm, but the navigation from html using [routerLink] gives me the following exception:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 
'car/2112'
Error: Cannot match any routes. URL Segment: 'car/2112'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError 
(router.js:2464)
at CatchSubscriber.selector (router.js:2445)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)

Shouldn't these links to my named outlet both work?

Chellappan, thanks for looking. I updated the Routes. I appreciate any hints on what you think could be wrong. — plex4r, Sep 24 '19 at 14:56
I have tried in stackblitz. It's working check this:https://stackblitz.com/edit/angular-ra1ev3 — Chellappan வ, Sep 24 '19 at 15:02
Chellappan, thank you for doing that. Let me study that and try to see what is different with my application. — plex4r, Sep 24 '19 at 15:36
Chellappan, I took your example and modified to what I have. Can you figure out the error from clicking on the link "GI Link" while the "Change" button works? https://stackblitz.com/edit/angular-nypsvt — plex4r, Sep 24 '19 at 16:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199959/discussion-between-plex4r-and-chellappan). — plex4r, Sep 25 '19 at 12:23

score 2 · Answer 1 · answered Sep 26 '19 at 18:12

2

Answered by this more specific question with a StackBlitz example showing the problem: Routing to a named outlet from links in a navigation component fails only when using [routerLink]

answered Sep 26 '19 at 18:12

plex4r

243
1
2
15

score 1 · Answer 2 · answered Sep 26 '19 at 20:31

1

add empty string before the outlet like bellow

[routerLink]="['', { outlets: { center: ['gi', '10'] } }]"

answered Sep 26 '19 at 20:31

Raghul Selvam

314
2
6

Angular "Error: Cannot match any routes. URL Segment" when using [routerLink], but it works with this.router.navigate

2 Answers2