How to use separate layout for login component in angular 2?

Question

I am new in angular. I create a login component , it works fine fine but issue is that I want a separate layout of login from whole app. What changes required for that?

I search on google but everyone give diff solution which not understandable also.

const appRoutes: Routes = [
{ path: 'alert/:id', component: AlertDetailComponent },
{ path: 'alerts', component: AlertsComponent },
{ path: 'dashboard', component: EriskDashboardComponent },  
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },  
];

In app.component.html

<!-- page content -->
<div class="right_col" role="main">
    <router-outlet></router-outlet>           
</div>
<!-- /page content -->

Answer 1

In your app.component.html:

<router-outlet></router-outlet>

Then create MainComponent (main.component.ts) and put all of your main app layout in main.component.html:

<!-- page content -->
<div class="right_col" role="main">
    <router-outlet></router-outlet>           
</div>
<!-- /page content -->

This component will be parent for each your regular app component.

Then in your LoginComponent put different layout without router-outlet, for example:

<div class="login-wrapper">
  <div class="login">
   ... your login layout
  </div>
</div>

Then modify your routing to be something like that:

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full',
    children: [
      { path: 'alert/:id', component: AlertDetailComponent },
      { path: 'alerts', component: AlertsComponent },
      { path: 'dashboard', component: EriskDashboardComponent }
  ]}];

So MainComponent will contain all reusable layouts and app structure for any child component, while LoginComponent is independent and it has its own layout.

Answer 2

The answer of @anton-rusak is perfect. In angular 11 I had the problen "redirectTo and children cannot be used together".

I just removed the full path and redirectTo and it worked fine.

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: HomeComponent, canActivate: [AuthGuardService],
    children: [
      { path: 'products', component: ProductsComponent },
    ]}
];