title: Angular2 : Router and auxiliary routes
body: <p>I'm playing with Angular2 auxiliary routes and I can't figure something out.</p>
  
  <p>Let say we have a basic mail app with some contacts too.</p>
  
  <p>Basically, my HTML look like this : </p>
  
  <pre><code>&lt;div&gt;
    &lt;a [routerLink]="['emails']"&gt;Emails&lt;/a&gt;
    &lt;a [routerLink]="['contacts']"&gt;Contacts&lt;/a&gt;
    &lt;a [routerLink]="[{outlets: {aux: ['auxiliary']}}]"&gt;Open an auxiliary route&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;router-outlet name="aux"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>So far, it's <strong>nearly</strong> fine.</p>
  
  <ul>
  <li><code>/emails</code> is diplaying fine</li>
  <li><code>/contacts</code> is diplaying fine</li>
  <li><code>/emails(aux:auxiliary)</code> is diplaying fine <strong>at loading</strong></li>
  <li><code>/contacts(aux:auxiliary)</code> is diplaying fine <strong>at loading</strong></li>
  </ul>
  
  <p>When the auxiliary is in URL, it's ok the first time we reach it.<br>
  But then, if I click on <code>&lt;a [routerLink]="['emails']"&gt;Emails&lt;/a&gt;</code>, my aux outlet is not displayed anymore even tho the URL is still <code>http://localhost:4200/emails(aux:auxiliary)</code>.</p>
  
  <p>So my question is, how can we change the primary URL, without changing auxiliary routes ? (if no auxiliary, just go to new URL, if auxiliary, go to URL + auxiliary).</p>
  
  <p>I tried : </p>
  
  <pre><code>&lt;a [routerLink]="['emails', {outlets: {aux: ['/']}}]"&gt;Emails&lt;/a&gt;
  &lt;a [routerLink]="['contacts', {outlets: {aux: ['/']}}]"&gt;Contacts&lt;/a&gt;
  </code></pre>
  
  <p>and also</p>
  
  <pre><code>&lt;a [routerLink]="['emails', {outlets: {aux: ['./']}}]"&gt;Emails&lt;/a&gt;
  &lt;a [routerLink]="['contacts', {outlets: {aux: ['./']}}]"&gt;Contacts&lt;/a&gt;
  </code></pre>
  
  <p>But it's not working either.</p>
  
  <p>Thanks for any help !</p>
  
  <p>PS : If you do want to try it by yourself, my test is on Github :</p>
  
  <pre><code>git clone https://github.com/maxime1992/angular2-nrgx-demo.git
  git checkout auxiliary-route
  npm i
  ng serve
  </code></pre>
  
  <p>And just look to the following url : 
  <a href="http://localhost:4200/emails" rel="nofollow noreferrer">http://localhost:4200/emails</a></p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>Here's a GIF to demonstrate the problem :
  <a href="https://i.stack.imgur.com/wBvq2.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBvq2.gif" alt="enter image description here"></a></p>