click "product/detail/item" button dose not work

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular Tour of Heroes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css" />
    
    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-home',
  template: `
    <div>The route is "".</div>
  `
})
export class HomeComponent {}

import { NgModule }      from '@angular/core';

import { HomeRouterModule } from './home.router.module';
import { HomeComponent }         from './home.component';

@NgModule({
  imports: [
    HomeRouterModule
  ],
  declarations: [HomeComponent],
  providers: [ ]
})
export class HomeModule { }

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRouterModule } from './app.router.module';
import { AppComponent }         from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AppRouterModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

import { Component }          from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/" routerLinkActive="active">home</a>
      <a routerLink="/product" routerLinkActive="active">product</a>
      <a routerLink="/product/list" routerLinkActive="active">product/list</a>
      <a routerLink="/product/detail" routerLinkActive="active">product/detail</a>
      <a routerLink="/product/detail/item" routerLinkActive="active">product/detail/item</a>
      <a routerLink="/product/detail/item2" routerLinkActive="active">product/detail/item2</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent { }

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './app/home.module#HomeModule' },
  { path: 'product', loadChildren: './app/product/product.module#ProductModule' },
  { path: '**', redirectTo: '', pathMatch: 'full' },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRouterModule {}

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent }         from './home.component';

const routes: Routes = [
  { path: '',  component: HomeComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class HomeRouterModule {}

import { NgModule }      from '@angular/core';

import { ProductRouterModule } from './product.router.module';
import { ProductComponent }         from './product.component';

@NgModule({
  imports: [
    ProductRouterModule
  ],
  declarations: [ProductComponent],
  providers: [ ]
})
export class ProductModule { }

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-product',
  template: `
    <div>The route is "product".</div>
    <router-outlet name="product"></router-outlet>
  `
})
export class ProductComponent {}

import { NgModule }      from '@angular/core';

import { ListRouterModule } from './list.router.module';
import { ListComponent }         from './list.component';

@NgModule({
  imports: [
    ListRouterModule
  ],
  declarations: [ListComponent],
  providers: [ ]
})
export class ListModule { }

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-product-list',
  template: `
    <div>The route is "product/list".</div>
  `
})
export class ListComponent {}

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ListComponent }         from './list.component';

const routes: Routes = [
  { path: '', outlet: 'product', component: ListComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class ListRouterModule {}

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ProductComponent }         from './product.component';

const routes: Routes = [
  { path: 'list',  component: ProductComponent, 'loadChildren': './app/product/list/list.module#ListModule' },
  { path: 'detail',  component: ProductComponent, 'loadChildren': './app/product/detail/detail.module#DetailModule' },
  { path: 'detail/item2',  component: ProductComponent, 'loadChildren': './app/product/detail/item2/item2.module#Item2Module' },
  { path: '',  component: ProductComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class ProductRouterModule {}

nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}

nav a:visited, a:link {
  color: #607D8B;
}

nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}

nav a.active {
  color: #039be5;
}

import { NgModule }      from '@angular/core';

import { DetailRouterModule } from './detail.router.module';
import { DetailComponent }         from './detail.component';

@NgModule({
  imports: [
    DetailRouterModule
  ],
  declarations: [DetailComponent],
  providers: [ ]
})
export class DetailModule { }

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DetailComponent }         from './detail.component';

const routes: Routes = [
  { path: 'item',  outlet: 'product', component: DetailComponent, 'loadChildren': './app/product/detail/item/item.module#ItemModule' },
  { path: '', outlet: 'product', component: DetailComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class DetailRouterModule {}

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-product-detail',
  template: `
    <div>The route is "product/detail".</div>
    <router-outlet name="detail"></router-outlet>
  `
})
export class DetailComponent {}

import { NgModule }      from '@angular/core';

import { ItemRouterModule } from './item.router.module';
import { ItemComponent }         from './item.component';

@NgModule({
  imports: [
    ItemRouterModule
  ],
  declarations: [ItemComponent],
  providers: [ ]
})
export class ItemModule { }

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ItemComponent }         from './item.component';

const routes: Routes = [
  { path: '', outlet: 'detail', component: ItemComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class ItemRouterModule {}

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-product-detail-item',
  template: `
    <div>The route is "product/detail/item".</div>
  `
})
export class ItemComponent {}

import { NgModule }      from '@angular/core';

import { Item2RouterModule } from './item2.router.module';
import { Item2Component }         from './item2.component';

@NgModule({
  imports: [
    Item2RouterModule
  ],
  declarations: [Item2Component],
  providers: [ ]
})
export class Item2Module { }

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Item2Component }         from './item2.component';

const routes: Routes = [
  { path: '', outlet: 'product', component: Item2Component }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class Item2RouterModule {}

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-product-detail-item2',
  template: `
    <div>The route is "product/detail/item2".</div>
  `
})
export class Item2Component {}