title: Can we have multiple <router-outlet> angular2+?
body: <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>