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
– plex4r, Commented Sep 24, 2019 at 14:56
I have tried in stackblitz. It's working check this:stackblitz.com/edit/angular-ra1ev3 — Chellappan வ
– Chellappan வ, Commented Sep 24, 2019 at 15:02
Chellappan, thank you for doing that. Let me study that and try to see what is different with my application. — plex4r
– plex4r, Commented Sep 24, 2019 at 15:36

plex4r · Accepted Answer · 2019-09-26 18:12:59Z

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, 2019 at 18:12

plex4r

3731 gold badge3 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raghul Selvam · Accepted Answer · 2019-09-26 20:31:19Z

1

add empty string before the outlet like bellow

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

answered Sep 26, 2019 at 20:31

Raghul Selvam

3152 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related