title: Children routing not working and application redirects to the 404 page
body: <p>I have created an angular application version 7 and project structure is like this.
  app module have app-routing.module.ts  and dashboard module  have dashboard-routing module.ts. In dashboard module, the layout component route has child components namely home and admin. </p>
  
  <p><strong>Here is my code:</strong></p>
  
  <p><strong>AppModule</strong></p>
  
  <pre><code>import { AppRoutingModule } from './app-routing.module';
  import { DashboardModule } from './dashboard/dashboard.module';
  
  import { AppComponent } from './app.component';
  import { LoginComponent } from './login/login.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      PageNotFoundComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      DashboardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>App-routing module:</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { LoginComponent } from './login/login.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  
  const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><strong>dashboard module file:</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { LayoutComponent } from './layout/layout.component';
  import { HomeComponent } from './home/home.component';
  import { AdminComponent } from './admin/admin.component';
  import { DashboardRoutingModule } from './dashboard-routing.module';
  
  @NgModule({
    declarations: [LayoutComponent, HomeComponent, AdminComponent],
    imports: [
      CommonModule,
      DashboardRoutingModule
    ]
  })
  export class DashboardModule { }
  </code></pre>
  
  <p><strong>dashboard-routing module.</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { Routes, RouterModule } from '@angular/router';
  
  import { LayoutComponent } from './layout/layout.component';
  import { HomeComponent } from './home/home.component';
  import { AdminComponent } from './admin/admin.component';
  
  
  const dashboardRoutes: Routes = [
    {
      path: 'dashboard',
      component: LayoutComponent,
      children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'admin', component: AdminComponent}
      ]
    }
  ];
  
  @NgModule({
    declarations: [],
    imports: [
      CommonModule,
      RouterModule.forChild(dashboardRoutes)
    ],
    exports: [RouterModule]
  })
  export class DashboardRoutingModule { }
  </code></pre>
  
  <p>Problem is I want to route to dashboard layout on localhost:4200 but it is always going to pageNotFound component route on every route. Can anyone point out what is the issue.</p>
  
  <p><strong>Code on StackBlitz:</strong></p>
  
  <p><a href="https://stackblitz.com/github/Ahsan9981/authGuardApp" rel="nofollow noreferrer">https://stackblitz.com/github/Ahsan9981/authGuardApp</a></p>
  
  <p><strong>Desired output</strong>
  <a href="https://i.stack.imgur.com/XJqc9.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XJqc9.gif" alt="enter image description here"></a></p>