<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">It seems impossible to navigate to some path and clear any named outlets in the process. Consider this code:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.router.navigate(['/', { outlets: { secondary: null } });"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'/'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">outlets</span>: <span class="pl-kos">{</span> <span class="pl-c1">secondary</span>: <span class="pl-c1">null</span> <span class="pl-kos">}</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">This does not remove the <code class="notranslate">(secondary:)</code> portion from the path. However this code does remove that segment:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.router.navigate([{ outlets: { secondary: null } });"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">outlets</span>: <span class="pl-kos">{</span> <span class="pl-c1">secondary</span>: <span class="pl-c1">null</span> <span class="pl-kos">}</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">In addition <code class="notranslate">this.router.navigateByUrl('/')</code> also works.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">The first code should also work and remove the secondary outlet segment from the path.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="http://plnkr.co/edit/hFsOdLLr2LCq8cJyOF6R?p=preview" rel="nofollow">http://plnkr.co/edit/hFsOdLLr2LCq8cJyOF6R?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">The current behavior looks erroneous. I believe there should be an <code class="notranslate">else</code> <a href="https://github.com/angular/angular/blob/master/packages/router/src/create_url_tree.ts#L225">here</a> which sets <code class="notranslate">children[outlet]</code> to <code class="notranslate">null</code> so it is not initialized later.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.10</li>
</ul>

<p dir="auto">Code in master looks the same as in 2.4.10.</p>
<ul dir="auto">
<li><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 ]</li>
</ul>

<p dir="auto">All browsers.</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
I think it is a framework issue rather than a language one.</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</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>