Download page outside the router in angular 4

Question

I am working on an angular 4 application and I want to download login.page.ts outside the router

this is my home.component.html file

<div class="container">
   <top-nav-bar></top-nav-bar>
   <lett-nav-bar></lett-nav-bar>
   <router-outlet></router-outlet>
</div>

configs routes

const MAINMENU_ROUTES: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

with this, I can load the login page of the router, but I want to load the login page in full screen mode before I go to the router.

Answer 1

. , , , , , . - :

<div class="container">
   <router-outlet></router-outlet>
</div>

.

:

    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
      children: [
       { path: 'child1', component: Child1Component },
       { path: 'child2', component: Child2Component }
      ]
    }

App Component, . child1 child2 Home Component.