Javascript 如何解决angular 2锅炉缺页问题？

我刚开始学习angular 2并克隆了这个repo： . 只需添加一个名为“列表”的额外菜单选项。我已创建组件并将其添加到管线：

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'home',  component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'detail', loadChildren: './+detail#DetailModule'},
  { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
  { path: '**',    component: NoContentComponent },
  { path: 'list', component: ListComponent}
];

这是列表组件：

import {
  Component,
  OnInit
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'list',
  styles: [`
  `],
  template: `
    <h1>list</h1>
    <div>
      For hot module reloading run
      <pre>npm run start:hmr</pre>
    </div>
    <div>
      <h3>
        patrick@AngularClass.com
      </h3>
    </div>
    <pre>this.localState = {{ localState | json }}</pre>
  `
})
export class ListComponent implements OnInit {

  public localState: any;
  constructor(
    public route: ActivatedRoute
  ) {}

  public ngOnInit() {
    this.route
      .data
      .subscribe((data: any) => {
        /**
         * Your resolved data from route.
         */
        this.localState = data.yourData;
      });

    console.log('hello `List` component');
    /**
     * static data that is bundled
     * var mockData = require('assets/mock-data/mock-data.json');
     * console.log('mockData', mockData);
     * if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
     */
    this.asyncDataWithWebpack();
  }
  private asyncDataWithWebpack() {
    /**
     * you can also async load mock data with 'es6-promise-loader'
     * you would do this if you don't want the mock-data bundled
     * remember that 'es6-promise-loader' is a promise
     */
    setTimeout(() => {

      System.import('../../assets/mock-data/mock-data.json')
        .then((json) => {
          console.log('async mockData', json);
          this.localState = json;
        });

    });
  }

}

---

如何解决此问题？

将列表路由移动到**路由上方，如下所示：

路由器使用首次匹配wins策略来匹配路由。因此，如果通配符路由**在“列表”上方声明，则以通配符路由为准

---

阅读路由器官方文档。

只需重新排列app.routes.ts文件中的路由顺序，它就可以工作了

404 page missing

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'home',  component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'detail', loadChildren: './+detail#DetailModule'},
  { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
  { path: 'list', component: ListComponent},
  { path: '**',    component: NoContentComponent }
];

export const ROUTES: Routes = [
 { path: '',      component: HomeComponent },
 { path: 'home',  component: HomeComponent },
 { path: 'about', component: AboutComponent },
 { path: 'list', component: ListComponent},
 { path: 'detail', loadChildren: './+detail#DetailModule'},
 { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
 { path: '**',    component: NoContentComponent }
];