title: Do aux routes work for the root component only?
body: <p>I'm having trouble setting up auxiliary routes in child components, for some reason only those auxiliary routes work that start at the root component.</p>
  
  <p>Here's my router setup</p>
  
  <pre><code>export const routes: RouterConfig = [
      { path: 'test1', component: Test1Component },
      { path: 'test2', component: Test2Component, outlet: 'aux'},        
      { path: 'shell', component: ShellComponent, children: [
          { path: 'department/:id', component: DepartmentDetailComponent },
          { path: 'test3', component: Test3Component, outlet: 'aux2' }         ] }
  ];
  </code></pre>
  
  <p>If I navigate to</p>
  
  <pre><code>http://localhost:3000/shell/department/1(aux:test2)
  </code></pre>
  
  <p>then the output is as expected, that is, <code>Test2Component</code> is rendered inside <code>AppComponent</code>, along with <code>ShellComponent</code> and <code>DepartmentDetailComponent</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/wWvCS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wWvCS.png" alt="Blue: Primary Outlet, Red: Aux Outlet"></a></p>
  
  <p>Primary outlets show up in blue, auxiliary outlets in red.</p>
  
  <p>If, however, I try to navigate to</p>
  
  <pre><code>http://localhost:3000/shell/department/1(aux2:test3)
  </code></pre>
  
  <p>I get an error message:</p>
  
  <blockquote>
    <p>platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'test3'</p>
  </blockquote>
  
  <p><code>router-outlets</code> are as follows:</p>
  
  <p><strong>app.component.ts (aux: test2)</strong></p>
  
  <pre><code>&lt;div class="app"&gt;
    &lt;h1&gt;App&lt;/h1&gt;
    &lt;div class="primary-outlet"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;div class="aux-outlet"&gt;
      &lt;router-outlet name="aux"&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>shell.component.ts (aux2: test3)</strong></p>
  
  <pre><code>&lt;div class="component"&gt;
    &lt;h1&gt;Shell&lt;/h1&gt;
    &lt;div class="primary-outlet"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;div class="aux-outlet"&gt;
      &lt;router-outlet name="aux2"&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I missing?</p>
  
  <p>EDIT: As suggested by Arpit Agarwal, navigating to</p>
  
  <pre><code>http://localhost:3000/shell/(department/1(aux2:test3))
  </code></pre>
  
  <p>does the trick:</p>
  
  <p><a href="https://i.stack.imgur.com/vsW1F.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vsW1F.png" alt="Test3 is rendered inside Shell"></a></p>
  
  <p>However, take a look at the URL after page load. If I press <code>F5</code> now, I'm back to square one:</p>
  
  <blockquote>
    <p>platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'shell'</p>
  </blockquote>
  
  <p>EDIT 2: Here's the <a href="https://github.com/erasethis/angular2-aux-test" rel="noreferrer">link to the project on github</a>.</p>