title: Angular 2 - navigation of aux outlet affecting primary outlet
body: <ul>
  <li>Functional requirements ( because the technical issue didn't make sense to the audience):</li>
  </ul>
  
  <p>An angular 2 app must configure itself at startup. if no query parameters     are present ( e.g. default state ) it must show a default home and a default form.
  If query parameters are present instead, a customization process takes place. The customization process basically shows a customized home and form.</p>
  
  <ul>
  <li>Technical requirements:</li>
  </ul>
  
  <p>The plunker is an over-simplified version of actual functional requirements ( query parameters parsing omitted ) which basically switches the head component.
  The call should take place in the main component since the parsing logic ( not included in the plunker) lies there.</p>
  
  <pre><code>this.route.queryParams.filter(qp =&gt; !_.isEmpty(qp)).subscribe(qp =&gt; this.parseParameters(qp));
  </code></pre>
  
  <p>The <strong>router.navigate</strong> fails to perform the navigation in the named outlet ( header ) from AppComponent.
  The same code works if used inside a subcomponent ( e.g. DefaultComponent)</p>
  
  <p>Here's the plunkr ( please look at the commented code)</p>
  
  <p><strong>DEMO : <a href="http://embed.plnkr.co/qyquCE4h5OX8sNLKM8lu/" rel="nofollow">http://embed.plnkr.co/qyquCE4h5OX8sNLKM8lu/</a></strong></p>
  
  <p>Adding some tracing I found out the router cancelled the navigation:</p>
  
  <ul>
  <li>Router Event: NavigationStart
  
  <ul>
  <li>NavigationStart(id: 1, url: '/(header:head)') </li>
  </ul></li>
  <li>Router Event: NavigationStart
  
  <ul>
  <li>NavigationStart(id: 2, url: '/')</li>
  </ul></li>
  <li>Router Event: NavigationCancel    
  
  <ul>
  <li>NavigationCancel {id: 1, url: "/(header:head)", reason: "Navigation ID 1 is not equal to the current navigation id 2"}</li>
  </ul></li>
  </ul>
  
  <p>Question:</p>
  
  <p>Are outlet trees mutually exclusive? In other words can I navigate the header outlet like this:</p>
  
  <pre><code>this.router.navigate(
  [{
    outlets: {
      header: "head"
    }
  }]
  </code></pre>
  
  <p>);</p>
  
  <p>without affecting the primary outlet?</p>