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

<p><strong>AppComponent</strong> 
<code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code>,</p>

<p><strong>HomeComponent</strong> </p>

<pre><code>&lt;a routerLink="/xyz"&gt;Inbox&lt;/a&gt;
&lt;a routerLink="/abc"&gt;Outbox&lt;/a&gt;
&lt;router-outlet name='outlet1'&gt;&lt;/router-outlet&gt;
</code></pre>

<p>My routes paths</p>

<pre><code>{ 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 }
</code></pre>