Angular 4 - Route query params cause path match failure

Question

After searching multiple threads/questions on the various types of routing within Angular 4, I cannot resolve an issue linked to passing queryParams to an Angular 4 route.

When passing either into the url

http://localhost/search;x=y

through the template [queryParams]={x: 'y'}

<a [routerLink]="/search" [queryParams]="{x: 'y'}">Navigate</a>

or in the component class

this._router.navigate(['/search'], { queryParams: {x: 'y'} });

the result is the router throwing a match error:

Error: Cannot match any routes. URL Segment: 'search%3Fparam1%3Dtest1%26param2%3Dtest2'

When setting enableTracing to true, I can see the navigation encodes the suspect characters, which most likely is the reason it's failing to match.

I have a requirement to handle urls that contain queryParams and parse them for api calls, so the query param route must be used over required or optional params.

Has anyone had a similar issue and if so, is the encoding the root (ahem.) cause of the issue?

Answer 1

Query parameters result in a url that looks like this:

http://localhost/search?x=y

With a question mark, not a semicolon.

Here is a summary for how to work with query parameters.

Note that they are not configured as part of the route definition.

Your routerLink and navigate method looks correct.

Update :
make sure to use this import.

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}