Do aux routes only use the root component?

Question

I'm having problems setting up auxiliary routes in child components, for some reason only those auxiliary routes work that start with the root component.

Here is 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 go to

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

then the output will be as expected, i.e. Test2Component displayed inside the AppComponent along with ShellComponent and DepartmentDetailComponent :

Primary outputs are displayed in blue, auxiliary outputs are red.

If, however, I try to go to

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

An error message appears:

platform-browser.umd.js: 1900 EXCLUSION: Error: uncleanness (in the promise): error: cannot match any routes: 'test3'

router-outlets :

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 Arpit Agarwal suggested, moving on to

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

does the trick:

However, look at the URL after the page loads. If I press F5 now, I will return to the square:

platform-browser.umd.js: 1900 EXCLUSION: Error: uncleanness (in the promise): error: cannot match any routes: "shell"

EDIT 2: Here is a link to the project on github .

Answer 1

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

The URL has the format (primaryroute//secondaryroute) in brackets indicates that it can have routes for sisters, and // is the route separator of the sister.

Aux and primary outputs are considered sibling on the 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> ` })