Multiple auxiliary routes at top level

Question

in this post they are configuring auxiliary routes but not at the top-level. I would like to configure the opposite, that is multiple routes at the top level. My main goal is to show a complete overlay (login page) on top of the normal application page.

Imagine I have the following html:

<div class="wrapper" *ngIf="mainRouterOutlet">
    <div header></div>
    <div sidebar></div>
    <div class="content-wrapper">
        <router-outlet></router-outlet>
    </div>
    <div footer></div>
</div>
<div *ngIf="!mainRouterOutlet">
<router-outlet name="outside"></router-outlet>
</div>

Is it possible to have a route '/login' that uses the outside router-outlet and ignores the default one? Is it possible to know what router is active, so I could hide the wrapper class with an ngIf directive and only the outside router-outlet is active.

Answer 1

you could use named outlet-router. But you must consider this

A template may hold exactly one unnamed . The router supports multiple named outlets, a feature we'll cover in future.

besides this, you can start using it now but keep in mind that it is partially implemented

    { path: 'site1', component: Site1Component },
    { path: 'site2', component: Site2Component, outlet: 'outlet1' },
    { path: 'site3', component: Site3Component, outlet: 'outlet2' }


<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>

Answer 2

When using *ngIf, it will hide the router-outlet completely from the DOM. I got

Error: Uncaught (in promise): Error: Cannot find primary outlet to load '...Component'

When using [hidden], it will just set the visibility of the element so the router can still function.

In the end I used this html:

<div class="wrapper" [hidden]="isLogin">
    <div header></div>
    <div sidebar></div>
    <div class="content-wrapper">
        <router-outlet></router-outlet>
    </div>
    <div footer></div>
</div>
<div [hidden]="!isLogin">
    <router-outlet name="outside"></router-outlet>
</div>

and the normal router configuration:

const appRoutes: Routes = [
    { path: 'success',  component: SuccessComponent }, // using the default router-outlet
    { path: 'login', component: LoginComponent, outlet: 'outside' }, // using the outside router-outlet
];

Just by toggling the isLogin property, I was able to hide the normal application layout properly and present the user a complete login screen (when not logged in yet).