<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>
I have a child aux route:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const routes = [
  {
    path: 'first', 
    component: FirstComponent, 
    children: [
      {
        path: 'add-groups',
        outlet: 'aside',
        component: AsideComponent
      }
  ]
];"><pre class="notranslate"><code class="notranslate">const routes = [
  {
    path: 'first', 
    component: FirstComponent, 
    children: [
      {
        path: 'add-groups',
        outlet: 'aside',
        component: AsideComponent
      }
  ]
];
</code></pre></div>
<p dir="auto">Aux component has a close button that works only when parent's params are set to navigate method like that:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" this.router.navigate([this.route.parent.snapshot.params, {outlets: {aside: null}}]);"><pre class="notranslate"><code class="notranslate"> this.router.navigate([this.route.parent.snapshot.params, {outlets: {aside: null}}]);
</code></pre></div>
<p dir="auto">and doesn't work like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" this.router.navigate([{outlets: {aside: null}}]);"><pre class="notranslate"><code class="notranslate"> this.router.navigate([{outlets: {aside: null}}]);
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
Expect  this.router.navigate([{outlets: {aside: null}}]); will close the aux</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://plnkr.co/edit/kA434H7u5mJbiB7vvkCQ" rel="nofollow">https://plnkr.co/edit/kA434H7u5mJbiB7vvkCQ</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Use aux routing</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Mac OS</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.4.8</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
All</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report"><pre class="notranslate"><code class="notranslate">[X] bug report
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">I have some routes like:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const routes = [
    { path: &quot;&quot;, component: HomeComponent, pathMatch: &quot;full&quot; },
    { path: &quot;profile&quot;, component: ProfileComponent },
    { path: &quot;menu&quot;, component: MenuComponent, outlet: &quot;sidebar&quot; },
];"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">routes</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
    <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">""</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">HomeComponent</span><span class="pl-kos">,</span> <span class="pl-c1">pathMatch</span>: <span class="pl-s">"full"</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">"profile"</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">ProfileComponent</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">"menu"</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">MenuComponent</span><span class="pl-kos">,</span> <span class="pl-c1">outlet</span>: <span class="pl-s">"sidebar"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">When the route <code class="notranslate">http://localhost/(sidebar:menu)</code> is open, then I'm able to remove the named outlet and go to <code class="notranslate">http://localhost/</code> by clicking an anchor like the following:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;a [routerLink]=&quot;['', {outlets: {sidebar: null}}]&quot;&gt;
    Close
&lt;/a&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">[routerLink]</span>="<span class="pl-s">['', {outlets: {sidebar: null}}]</span>"<span class="pl-kos">&gt;</span>
    Close
<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">What doesn't work is navigating away from the sidebar <strong>and also</strong> going to another route like  <code class="notranslate">http://localhost/profile</code>.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;a [routerLink]=&quot;['/profile', {outlets: {sidebar: null}}]&quot;&gt;
    Close
&lt;/a&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">[routerLink]</span>="<span class="pl-s">['/profile', {outlets: {sidebar: null}}]</span>"<span class="pl-kos">&gt;</span>
    Close
<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The link that is rendered is <code class="notranslate">http://localhost:3971/profile(sidebar:menu)</code></p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The link that should be rendered is <code class="notranslate">http://localhost:3971/profile</code>.</p>
<p dir="auto"><strong>Repro</strong></p>
<p dir="auto"><a href="https://github.com/tinchou/router-repro">https://github.com/tinchou/router-repro</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10, Visual Studio 2017</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.3.1 (didn't work with 2.1.0 either)</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.10</p>
</li>
</ul>