Angular 4 - Route query params cause path match failure : <p>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.</p>

<p>When passing either into the url </p>

<pre><code>http://localhost/search;x=y
</code></pre>

<p>through the template [queryParams]={x: 'y'}</p>

<pre><code>&lt;a [routerLink]="/search" [queryParams]="{x: 'y'}"&gt;Navigate&lt;/a&gt;
</code></pre>

<p>or in the component class</p>

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

<p>the result is the router throwing a match error:</p>

<pre><code>Error: Cannot match any routes. URL Segment: 'search%3Fparam1%3Dtest1%26param2%3Dtest2'
</code></pre>

<p>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.</p>

<p>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.</p>

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