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.

Can you try http://localhost:3000/shell/(department/1(aux2:test3)) this will not show test2comp as URL doesn't have path for it. — Arpit Agarwal, Jul 06 '16 at 12:27
That actually renders Test3 inside aux2, but there's a catch: The URL is changed to http://localhost:3000/shell/(/(department/1//aux2:test3)) after page load and then the whole thing breaks down again with "Cannot match any routes: 'shell'" on page refresh. — Thorsten Westheider, Jul 06 '16 at 12:37
Try http://localhost:3000/shell/(department/1//aux2:test3) or http://localhost:3000/shell/(department;id=1//aux2:test3). You may need to remove Id from route definition for later to work — Arpit Agarwal, Jul 06 '16 at 12:59
localhost:3000/shell/(department/1//aux2:test3) works, the other one is broken. You should make that an actual answer, I'd be very interested in why the URL has to take that form. — Thorsten Westheider, Jul 06 '16 at 13:03

score 5 · Accepted Answer · answered Jul 06 '16 at 13:08

5

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

answered Jul 06 '16 at 13:08

Arpit Agarwal

3,993
24
30

2

`routerLink="/shell(department/1//aux2:test3)"` doesn't seem to work, but `router.navigateByUrl( "/shell(department/1//aux2:test3)" );` works just fine. – Hector Jul 06 '16 at 14:22
1

Yes. There seems to be some issue in routerLink to navigate to aux routes. Not sure if a bug is logged or not. Will check and update – Arpit Agarwal Jul 06 '16 at 16:07

score 1 · Answer 2 · edited Nov 29 '16 at 19:13

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>
  `
})

Do aux routes work for the root component only?

2 Answers2

Linked