Angular 2 multiple router outlets
<p>I have an Angular 2 application created with Angular cli, my app.component.html look like this : </p>

<pre><code>&lt;app-navigation&gt;&lt;/app-navigation&gt;

&lt;app-top-navbar&gt;&lt;/app-top-navbar&gt;

&lt;router-outlet&gt;&lt;/router-outlet&gt;

&lt;app-footer&gt;&lt;/app-footer&gt;

&lt;app-right-sidebar&gt;&lt;/app-right-sidebar&gt;
</code></pre>

<p>In my routes i have this condition that tells angular to redirect to /Login if no token is registered in localStorage :</p>

<pre><code>canActivate(): boolean {
    if (!localStorage.getItem('token')) { 
        this.router.navigate(['/login']);
        return false;
    }
    return true;
}
</code></pre>

<p>This works perfectlly, but my problem is that i would like to display the /Login (LoginComponent ) not is this router outlet with the sidebar, menu and footer, but in its own router-oulter without the other components.</p>

<p>Any idea on how to do it ?</p>