<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>
A routed component cannot use a relative path to navigate to another component; whether from the primary changing the named router outlet, or from a named router changing the primary.<br>
The issue is written up <a href="http://stackoverflow.com/questions/42227349/angular-2-relative-pathing-from-a-named-outlet" rel="nofollow">here</a>.<br>
The closest routerLink syntax to navigating to a new named router outlet component is:<br>
<code class="notranslate">&lt;a [routerLink]="['', {outlets: {aux: ['details']}}]"&gt;Details&lt;/a&gt;</code><br>
However, when a routed component is already in the aux named route, this routerLink produces an extra set of parenthesis.</p>
<blockquote>
<p dir="auto">auth/portfolio/(home/1//aux:details)(aux:details)</p>
</blockquote>
<p dir="auto">If a routed component isn't already in the aux named route, then the url generated is malformed anyway.</p>
<blockquote>
<p dir="auto">auth/portfolio/(home/1)(aux:details)</p>
</blockquote>
<p dir="auto"><strong>Expected behavior</strong><br>
I would expect to be able to change to another route via a routerLink like the documentation says, regardless of the depth I am in the URL tree.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://plnkr.co/edit/uoUBG6yDfNb6P0oLKN16?p=preview" rel="nofollow">https://plnkr.co/edit/uoUBG6yDfNb6P0oLKN16?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
We have an application where the named router outlet is used to display lists of entities.  Upon selecting an entity, the application replaces the primary router outlet with the details of the entity.  Entity details control which lists are available, so navigation occurs in the primary router outlet to change which component is showing in the named router outlet.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Azure App Services</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.7<br>
<a href="https://unpkg.com/@angular/router@3.4.7/bundles/router.umd.js" rel="nofollow">https://unpkg.com/@angular/router@3.4.7/bundles/router.umd.js</a></p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
Chrome 56</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</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>