Do aux routes work for the root component only?

Question

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.

Here's my router setup

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' }         ] }
];

If I navigate to

http://localhost:3000/shell/department/1(aux:test2)

then the output is as expected, that is, Test2Component is rendered inside AppComponent, along with ShellComponent and DepartmentDetailComponent:

Primary outlets show up in blue, auxiliary outlets in red.

If, however, I try to navigate to

http://localhost:3000/shell/department/1(aux2:test3)

I get an error message:

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'test3'

router-outlets are as follows:

app.component.ts (aux: test2)

<div class="app">
  <h1>App</h1>
  <div class="primary-outlet">
    <router-outlet></router-outlet>
  </div>
  <div class="aux-outlet">
    <router-outlet name="aux"></router-outlet>
  </div>
</div>

shell.component.ts (aux2: test3)

<div class="component">
  <h1>Shell</h1>
  <div class="primary-outlet">
    <router-outlet></router-outlet>
  </div>
  <div class="aux-outlet">
    <router-outlet name="aux2"></router-outlet>
  </div>
</div>

What am I missing?

EDIT: As suggested by Arpit Agarwal, navigating to

http://localhost:3000/shell/(department/1(aux2:test3))

does the trick:

However, take a look at the URL after page load. If I press F5 now, I'm back to square one:

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'shell'

EDIT 2: Here's the link to the project on github.

Answer 1

Try using http://localhost:3000/shell/(department/1//aux2:test3)

URL has format (primaryroute//secondaryroute) parentheses tells it may have sibling routes and // is sibling route separator.

Aux and primary outlets are considered sibling on same parent

Answer 2

some working example click here

important points

<a [routerLink]="['/component-one',{ outlets: { 'sidebar': ['component-aux'] } }]">Component One</a>

@Component({
  selector: 'component-one',
  template: `Component One
    <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
    <div style="border: 2px solid blue; padding: 1rem;">
      <router-outlet name="sidebar"></router-outlet>
    </div>
  `
})