Angular 2 multiple router outlets

Question

I have an Angular 2 application created with Angular cli, my app.component.html look like this :

<app-navigation></app-navigation>

<app-top-navbar></app-top-navbar>

<router-outlet></router-outlet>

<app-footer></app-footer>

<app-right-sidebar></app-right-sidebar>

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

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

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.

Any idea on how to do it ?

Answer 1

Yeah you can have nested router outlets.

Here's my seed project that does just that.

https://github.com/danday74/angular2-coverage/tree/master/app

Answer 2

You don't have to do anything in particular to hook up the login component to the default except to make sure you have a route defined for the login component in your routing array. However if you want it to show in a certain area of the page, for instance, you may want to place it in a named outlet. To do that you would just specify the outlet in your routing component like this: { path: 'login', component: myLoginComponent, outlet: 'leftSidebar', children: [] } The official docs have instructions on how to set up the routing component.