<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When loading an application using a leading slash and query parameters, the route matcher misbehaves:</p>
<p dir="auto">For the following routes:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="a
a/:userName"><pre class="notranslate"><code class="notranslate">a
a/:userName
</code></pre></div>
<p dir="auto">Requesting 'site.com/a' and ''site.com/a/' both return the correct route <code class="notranslate">a</code><br>
Requesting 'site.com/a?someParam=1' returns the correct route <code class="notranslate">a</code><br>
Requesting 'site.com/a/?someParam=1' returns the route <code class="notranslate">a/:userName</code></p>
<p dir="auto">This is an edge case, as [routerLink] elements handle this correctly, and it is only when loading routes directly that the problem is observed</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Requesting 'site.com/a/?someParam=1' should return the route <code class="notranslate">a</code>, the query parameters shouldn't influence route matching</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Demo isn't possible through plunkr as direct links are not testable<br>
Create an app with the routes defined above, and load the links directly (this only manifests itself on first loads)</p>
<p dir="auto">EDIT: simplest way to reproduce:</p>
<ul dir="auto">
<li>Clone <a href="https://github.com/angular/angular2-seed">https://github.com/angular/angular2-seed</a></li>
<li>Running:
<ul dir="auto">
<li>load <code class="notranslate">http://localhost:3000/#/home</code> and <code class="notranslate">http://localhost:3000/#/home/</code>, verify both work</li>
<li>load <code class="notranslate">http://localhost:3000/#/home/?test=1</code>, verify a "Cannot match any routes." error is thrown</li>
</ul>
</li>
</ul>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">This was found when creating email links to account verification. It is an edge case as specified above, but still possible and may have other implications I haven't considered</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Tested using Typescript + WebPack</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.2.X</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Tested on Chrome 54.0.2840.98</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Query string being is being treated as a path segment for route matching</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="RouterModule.forRoot([
  { path: 'items/all', component: AllItemsComponent }
  { path: 'items/:id/:alias', component: SingleItemComponent }
]);"><pre class="notranslate"><span class="pl-smi">RouterModule</span><span class="pl-kos">.</span><span class="pl-en">forRoot</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
  <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'items/all'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">AllItemsComponent</span> <span class="pl-kos">}</span>
  <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'items/:id/:alias'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">SingleItemComponent</span> <span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li>Navigating to <code class="notranslate">/items/all?param=x</code> shows AllItemsComponent</li>
<li>Navigating to <code class="notranslate">/items/all/?param=x</code> shows SingleItemComponent</li>
<li>Navigating to <code class="notranslate">/items/all/</code> redirects to <code class="notranslate">/items/all</code></li>
</ul>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<ul dir="auto">
<li>Navigating to <code class="notranslate">/items/all?param=x</code> shows AllItemsComponent</li>
<li>Navigating to <code class="notranslate">/items/all/?param=x</code> shows AllItemsComponent or redirects to <code class="notranslate">/items/all?param=x</code></li>
</ul>
<p dir="auto">It would be nice if we could provide a regex for matching routes, rather than just a simple path. This could be solved in the back-end but that is very annoying to have to do.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">See above - sorry I don't know how to demonstrate this using plnkr since it requires navigating directly to a page.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">See above</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
If <code class="notranslate">/path/</code> behaves the same as <code class="notranslate">/path</code>, then <code class="notranslate">/path/?query</code> should behave the same as <code class="notranslate">/path?query</code></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> TypeScript 1.8</li>
</ul>