angular - Do aux routes work for the root component only? -


i'm having trouble setting auxiliary routes in child components, reason auxiliary routes work start @ root component.

here's 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 navigate to

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

then output expected, is, test2component rendered inside appcomponent, along shellcomponent , departmentdetailcomponent:

blue: primary outlet, red: aux outlet

primary outlets show in blue, auxiliary outlets in red.

if, however, try navigate to

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

i error message:

platform-browser.umd.js:1900 exception: error: uncaught (in promise): error: cannot match routes: 'test3'

router-outlets 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 missing?

edit: suggested arpit agarwal, navigating to

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

does trick:

test3 rendered inside shell

however, take @ url after page load. if press f5 now, i'm square one:

platform-browser.umd.js:1900 exception: error: uncaught (in promise): error: cannot match routes: 'shell'

edit 2: here's link project on github.

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

url has format (primaryroute//secondaryroute) parentheses tells may have sibling routes , // sibling route separator.

aux , primary outlets considered sibling on same parent


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -