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) {}

Answer 2

After some deliberation I was able to fix the issue.

I was using ActivatedRouteSnapshot to store the url (including query params) as a whole, then passing that through to the router.

I should have stored the query params in a separate object to the route and passed them in using

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

Of course the route matching failed as it couldn't match a route with all the query params added onto the end of the string.

Answer 3

For example, you want to add a link that will redirect to the search page with variable: searchString = 'search'

<a [routerLink]="['/search', searchString]">Navigate</a>

In your component, you can create a navigation by using this._router.navigate(['/search', this.searchString]);, where searchString is declared as a const in both cases.

Answer 4

Following code saved me:

         this.router.navigate(['route-name'], { queryParams: {key:'value'} });        

On the receiving end fetch the value by: ( I assume ActivatedRoute is injected place),

         this.route.queryParams.subscribe(params => {console.log(queryParams['key'])}

Or at template level you can write like this.

 **<a [routerLink]="['/login']" [queryParams]="{ key: 'employer'}" >sign in</a></p>**

Note: route is an instance of ActivatedRoute.