title: Angular 6 routing redirecting
body: <p>I'm new to <code>Angular</code> and writing my first <code>Angular</code> application for admin dashboard.</p>
  
  <p>I have to setup two layouts</p>
  
  <ol>
  <li>for authentication like login, logout, forgot-password, etc</li>
  <li>admin dashboard will come after login</li>
  </ol>
  
  <p>for that I have setup two layout components</p>
  
  <ol>
  <li>admin-layout</li>
  <li>auth-layout</li>
  </ol>
  
  <p>and put all auth components in auth module</p>
  
  <p>The directory structure of my application is like</p>
  
  <pre><code>app
  |- e2e
  |- node_modules
  |- src
     |- app
        |- auth (module)
           |- login (component)
              |- login.component.ts
              |- login.component.html
           |- register (component)
              |- register.component.ts
              |- register.component.html
           |- auth.module.ts
        |- dashboard (component for auth users)
           |- dashboard.component.ts
           |- dashboard.component.html
        |- layouts ( directory)
           |- admin-layout (component)
              |- admin-layout.component.html
              |- admin-layout.component.ts
              |- admin-layout.module.ts
              |- admin-layout.routing.ts
           |- auth-layout (component)
              |- auth-layout.component.html
              |- auth-layout.component.ts
              |- auth-layout.module.ts
              |- auth-layout.routing.ts
        |- app.component.html
        |- app.component.ts
        |- app.module.ts
        |- app-routing.module.ts
     |- assets
     |- index.html
  </code></pre>
  
  <p>content of <strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  import {AppRoutingModule} from './app-routing.module';
  import { AppComponent } from './app.component';
  import {FormsModule} from '@angular/forms';
  import {RouterModule} from '@angular/router';
  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  import {HttpClientModule} from '@angular/common/http';
  import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import {ComponentsModule} from './components/components.module';
  import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      AdminLayoutComponent,
      AuthLayoutComponent
    ],
    imports: [
      BrowserAnimationsModule,
      FormsModule,
      HttpClientModule,
      RouterModule,
      AppRoutingModule,
      NgbModule.forRoot(),
      ComponentsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>content of <strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
  import {CommonModule} from '@angular/common';
  import {BrowserModule} from '@angular/platform-browser';
  import {AuthLayoutComponent} from './layouts/auth-layout/auth-layout.component';
  
  const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '', component: AdminLayoutComponent, children: [
        {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
      ] },
    { path: '', component: AuthLayoutComponent, children: [
        {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
      ]}
  ];
  
  @NgModule({
    imports: [
      CommonModule,
      BrowserModule,
      RouterModule.forRoot(routes)
    ],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>content of <strong>admin-layout.routing.ts</strong></p>
  
  <pre><code>import { Routes } from '@angular/router';
  import {DashboardComponent} from '../../dashboard/dashboard.component';
  
  export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard', component: DashboardComponent}
  ];
  </code></pre>
  
  <p>content of <strong>admin-layout.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from '@angular/router';
  import { FormsModule } from '@angular/forms';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { AdminLayoutRoutes } from './admin-layout.routing';
  import { DashboardComponent } from '../../dashboard/dashboard.component';
  import { IconsComponent } from '../../icons/icons.component';
  import {ChartsModule} from 'ng2-charts';
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(AdminLayoutRoutes),
      FormsModule,
      ChartsModule,
      NgbModule
    ],
    declarations: [
      DashboardComponent,
      IconsComponent
    ]
  })
  export class AdminLayoutModule { }
  </code></pre>
  
  <p>content of <strong>auth-layout.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import {RouterModule} from '@angular/router';
  import {AuthLayoutRoutes} from './auth-layout.routing';
  import {FormsModule} from '@angular/forms';
  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  import {AuthModule} from '../../auth/auth.module';
  import {LoginComponent} from '../../auth/login/login.component';
  import {RegisterComponent} from '../../auth/register/register.component';
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(AuthLayoutRoutes),
      FormsModule,
      NgbModule,
      AuthModule
    ],
    declarations: [
      LoginComponent,
      RegisterComponent
    ]
  })
  export class AuthLayoutModule { }
  </code></pre>
  
  <p>content of <strong>auth-layout.routing.ts</strong></p>
  
  <pre><code>import {Routes} from '@angular/router';
  import {LoginComponent} from '../../auth/login/login.component';
  import {RegisterComponent} from '../../auth/register/register.component';
  import {ForgotPasswordComponent} from '../../auth/forgot-password/forgot-password.component';
  import {ResetPasswordComponent} from '../../auth/reset-password/reset-password.component';
  
  export const AuthLayoutRoutes: Routes = [
    {path: 'login', component: LoginComponent},
    {path: 'register', component: RegisterComponent},
    {path: 'forgot-password', component: ForgotPasswordComponent},
    {path: 'reset-password', component: ResetPasswordComponent}
  ];
  </code></pre>
  
  <blockquote>
    <p>Question</p>
  </blockquote>
  
  <p>On accessing <code>localhost:4200</code> is redirecting to <code>localhost:4200/dashboard</code> and it's working as <code>dashboard</code> path is set in admin routing.</p>
  
  <p>But on accessing <code>localhost:4200/login</code> is redirecting to <code>localhost:4200</code> and login routing is not working from auth routing.</p>
  
  <blockquote>
    <p>App code url: <a href="https://stackblitz.com/edit/angular-lwevqj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-lwevqj</a><br>
    App url: <a href="https://angular-lwevqj.stackblitz.io" rel="nofollow noreferrer">https://angular-lwevqj.stackblitz.io</a></p>
  </blockquote>