How to route on multiple components in angular 2
<p>I have a messaging project in angular 2.
<a href="https://i.stack.imgur.com/68qsQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/68qsQ.png" alt="angular 2 routing image"></a></p>

<p><strong>Routing Conditions:</strong></p>

<pre><code>1) path: /login , component: LoginComponent
2) path: /inbox , component: InboxMessageComponent
3) path:/inbox/all , "Load InboxMessageListComponent in Right side Box Only",
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"
</code></pre>

<p>So I created two routing module named app-routing.module.ts and inbox-routing.module.ts.</p>

<p><strong>app-routing.module.ts</strong></p>

<pre><code>@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent},
            { path: 'inbox', component: InboxMessageComponent },
            { path: '', component: InboxMessageComponent },
            { path: '**', component: NotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})
</code></pre>

<p><strong>inbox-routing.module.ts</strong></p>

<pre><code>@NgModule({
    imports: [
        RouterModule.forChild([
            {path: '/inbox/list',component: InboxMessageListComponent},
            {path: '/inbox/detail/:id',component: InboxMessageDetailComponent}
        ])
    ],
    exports: [RouterModule]
})
</code></pre>

<p><strong>app.component.ts</strong></p>

<pre><code>template : '&lt;router-outlet&gt;&lt;/router-outlet&gt;'&lt;!--This route-outlet will load "LoginComponent/InboxComponent" depending upon the routing. --&gt;
</code></pre>

<p><strong>inbox-message.component.ts</strong></p>

<pre><code>template:`
&lt;sidebar-component&gt;&lt;/sidebar-component&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt; &lt;!-- This will load InboxMessageListComponent or InboxMessageDetailComponent --&gt;
`
</code></pre>

<p>But the problem is only one  is working at a time. The second one is skipping.</p>

<p>How to Route this kind of project ?</p>