title: child component cannot load use child route in angular
body: <p>I have a Bar component, then I create a child component (child-bar) under Bar Component. I also have child route for it. But I child component cannot find (404) when I use child route.</p>
  
  <p>app.routes.ts:</p>
  
  <pre><code>import { Routes } from '@angular/router';
  import { HomeComponent } from './home';
  import { AboutComponent } from './about';
  import { BarComponent } from './bar/bar.component';
  import { NoContentComponent } from './no-content';
  
  import { DataResolver } from './app.resolver';
  
  export const ROUTES: Routes = [
    { path: '',      component: HomeComponent },
    { path: 'home',  component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'bar', component: BarComponent},
    { path: 'detail', loadChildren: './+detail#DetailModule'},
    { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
    { path: '**',    component: NoContentComponent },
  ];
  </code></pre>
  
  <p>bar.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'bar',
    templateUrl: './bar.component.html',
    styleUrls: ['./bar.component.css']
  })
  export class BarComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>bar.component.html:</p>
  
  <pre><code>&lt;p&gt;
    bar works!
  &lt;/p&gt;
  &lt;span&gt;
        &lt;a [routerLink]=" ['./child-bar'] "&gt;
          Child Bar
        &lt;/a&gt;
      &lt;/span&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>child-bar.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'child-bar',
    templateUrl: './child-bar.component.html',
    styleUrls: ['./child-bar.component.css']
  })
  export class ChildBarComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
      console.log('hello `ChildBar` component');
    }
  
  }
  </code></pre>
  
  <p>child-bar.module.ts:</p>
  
  <pre><code>import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  
  import { routes } from './child-bar.routes';
  import { ChildBarComponent } from './child-bar.component';
  
  console.log('`ChildBar` bundle loaded asynchronously');
  
  @NgModule({
    declarations: [
      /**
       * Components / Directives/ Pipes
       */
      ChildBarComponent,
    ],
    imports: [
      CommonModule,
      FormsModule,
      RouterModule.forChild(routes),
    ],
  })
  export class ChildBarModule {
    public static routes = routes;
  }
  </code></pre>
  
  <p>child-bar.routes.ts:</p>
  
  <pre><code>import { ChildBarComponent } from './child-bar.component';
  
  export const routes = [
    { path: '', component: ChildBarComponent,  pathMatch: 'full' },
  ];
  </code></pre>
  
  <p>Please let me know if you need more file, I can attach it. Thanks.</p>