Can we have multiple <router-outlet> angular2+?

Question

If it is possible to have multiple router outlets, I don't have any working code but assume I have login page in parent <router-outlet> in AppComponent. Once logged in I have to show MyHomeComponent in the parent <router-outlet>. Now, assume that, in MyHomeComponent I want a child <router-outlet> in which I want to show inbox messages, outbox messages, starred messages as user clicks on Inbox, Outbox and Starred links. Please help me to find an answer to this question

AppComponent <router-outlet></router-outlet>,

HomeComponent

<a routerLink="/xyz">Inbox</a>
<a routerLink="/abc">Outbox</a>
<router-outlet name='outlet1'></router-outlet>

My routes paths

{ path: 'login', component: LoginComponent},
 { path: '', component: LoginComponent },
 { path: 'user', children:[ 
         { path: ':name',children:[ 
               {path:'abc', component: InboxComponent, outlet: 'outlet1' },                                      
               {path:'xyz', component: OutboxComponent, outlet:'outlet1' } 
    ] }]}, 
    { path: '**', component: PageNotFoundComponent }

Answer 1

You can have one primary <router-outlet> for every route and additional named <router-outlet name="abc">s. The routes addressing these named outlets are called auxiliary routes. These routes are reflected in the URL within () like /crisis-center(aux:chat;open=true)"

See also

• https://angular.io/docs/ts/latest/guide/router.html
• https://angular.io/docs/ts/latest/api/router/index/Routes-type-alias.html
• https://angular.io/docs/ts/latest/api/router/index/Router-class.html
• Angular2 multiple router-outlet in the same template