"Cannot match any routes" error caused by URL-encoded query params

[Tihomir Mitkov]

Hello everybody,

I'm experiencing an issue where a link defined like this in a template:

<a routerLink="skills" [queryParams]="{redirectTo:'lastVisited'}" [class.navigated-to]="navigation.Skills"><span class="fa fa-medkit" aria-hidden="true" style="font-size: 0.9em">&nbsp;Skills</span></a>

works most of the time, but sometimes the router complains with this:

core.js:1448 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin/skills/skill-list-type%3FredirectTo%3DlastVisited'
Error: Cannot match any routes. URL Segment: 'admin/skills/skill-list-type%3FredirectTo%3DlastVisited'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at LastSubscriber.Subscriber._error (Subscriber.js:131)
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at LastSubscriber.Subscriber._error (Subscriber.js:131)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

It took me long time to notice that the query parameters are being percent-encoded (URL-encoded) in the error. After I noticed it I tried to replicate the problem by manually encode the parameters in the adress bar and I got exactly the same error. Now it is clear to me that the problem is indeed in the encoding. Since I bound the queryParams in the link as it is shown everywhere around the web (I've revised it many times and it is indeed *bound* with square brackets) I have no clue why the queryParams get encoded and on top of that at random (it's like it works flawlessly 95% of the time and occasionally complains with "Cannot match any routes") so what I did is to bind (with square brackets) routerLink, instead of assigning a value to it:

<a [routerLink]="['skills']" [queryParams]="{redirectTo:'lastVisited'}" [class.navigated-to]="navigation.Skills"><span class="fa fa-medkit" aria-hidden="true" style="font-size: 0.9em">&nbsp;Skills</span></a>

I don't know whether that would fix the problem, as the latter pops up at random.

Has anybody encountered such an issue or know what causes the URL to get percent-encoded?

Thanks

[Sander Elias]

Hi Thihomir,

Can you try reproducing your problem in a stackblitz? Makes it much easier to help you. Also, there is a reasonable change you find the issue yourself by doing the reproduction.

Regards

Sander

[Tihomir Mitkov]

Hi Sander,

Thank you for mentioning stackblitz. I will try to reproduce the problem there in the following days (need to sort out some priorities first).

Cheers

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LsRbl3GrmYU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.