title: angular 4 - routing within a component(child routes) not working properly
body: <p>I recently started learning angular4 and currently working on routing in angular. I followed angular routing docs and started implementing some simple functionality of child routing. And I am stuck with it. Below is my code. Can anybody please tell what am I doing wrong?</p>
  
  <p>Dashboard module is imported into root module which has its own routes insite it.
  <code>app/app.module.ts</code></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  import { DashboardModule } from './dashboard/dashboard.module';
  
  @NgModule({
    declarations: [
      AppComponent,
      PageNotFoundComponent,
    ],
    imports: [
      BrowserModule,
      DashboardModule,
      AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Root level routing module which has default route that redirects to dashboard compoent.
  <code>app/app-routing.module.ts</code></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: '',
      redirectTo: 'dashboard',
      pathMatch: 'full'
    },
    {
      path: 'dashboard',
      loadChildren: 'app/dashboard/dashboard.module#DashboardModule',
      data: {preload: true}
    },
    {
      path: 'login',
      component: LoginComponent,
    },
    {
      path: '**',
      component: PageNotFoundComponent
    }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>This is the routing configuration for child routes present in dashboard module
  <code>app/dashboard/dashboard-routing.ts</code></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Route } from '@angular/router';
  import { DispatchesComponent } from './dispatches/dispatches.component';
  import { DashboardComponent } from './dashboard.component';
  import { TransactionsComponent } from './transactions/transactions.component';
  
  const dashBoardRoutes : Route[] = [
    {
      path: 'dashboard',
      component: DashboardComponent,
      pathMatch: 'full',
      children: [
        {
          path: 'dispatches',
          component: DispatchesComponent
        },
        {
          path: 'txns',
          component: TransactionsComponent
        },
        {
          path: '',
          component: DispatchesComponent,
          pathMatch: 'full'
        },
      ]
    },
  ]
  
  @NgModule({
    imports: [
      RouterModule.forChild(dashBoardRoutes)
    ],
    declarations: [],
    exports: [
      RouterModule
    ]
  })
  export class DashboardRoutingModule { }
  </code></pre>
  
  <p>And finally I imported these routes into dashboard module
  <code>app/dashboard/dashboard.module.ts</code></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { DashboardComponent } from './dashboard.component';
  import { RouterModule } from '@angular/router';
  import { SharedModule } from './../shared/shared.module';
  import { DashboardRoutingModule } from './dashboard-routing.module';
  import { DispatchesModule } from './dispatches/dispatches.module';
  import { TransactionsModule } from './transactions/transactions.module';
  
  
  @NgModule({
    imports: [
      DispatchesModule,
      CommonModule,
      SharedModule,
      TransactionsModule,
      RouterModule,
      DashboardRoutingModule,
    ],
    declarations: [DashboardComponent]
  })
  export class DashboardModule { }
  </code></pre>
  
  <p>And here is html in dashboard component
  <code>dashboard.component.html</code></p>
  
  <pre><code>&lt;p&gt;
    dashboard works!
  &lt;/p&gt;
  &lt;button routerLink="/login"&gt;Go to login&lt;/button&gt;
  &lt;div&gt;
     &lt;app-sidebar&gt;&lt;/app-sidebar&gt; 
  &lt;/div&gt;
  &lt;div class="dashboard-routes"&gt;
    &lt;button routerLink="dispatches"&gt;dispatches&lt;/button&gt;
    &lt;button routerLink="txns"&gt;Transactions&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I navigate to <code>localhost:4200</code> it sucessfully redirects to dashboard as expected and displaying dispatches component inside it.
  <a href="https://i.stack.imgur.com/M2ltv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M2ltv.png" alt="dashboard"></a></p>
  
  <p>But when I click on either dispatches or txns. These child components are not rendering inside dashboards <code>router-outlet</code>. and taking to this page below</p>
  
  <p>What am I doing wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/dVEw1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dVEw1.png" alt="enter image description here"></a></p>