angular - Angular2模块无法匹配组件子路线

所以我有一个基于angular2的web应用程序。该站点有一个子模块tutorial和它自己的子路由器（浏览“章节”）。这是我的应用程序。
教程.module.ts：

import { tutorialRouting } from './tutorial.routes';
import { tutorialComponent } from './tutorial.component';
import { chapterComponent } from './chapter/chapter.component';

@NgModule({
  imports: [
    CommonModule,
    tutorialRouting
  ],
  declarations: [
    tutorialComponent,
    chapterComponent
  ],
  providers: []
})
export class tutorialModule {}

教程.routes.ts：

import { tutorialComponent }    from './tutorial.component';
import { chapterComponent }  from './chapter/chapter.component';

const tutorialRoutes: Routes = [
  {
    path: 'tutorial',
    component: tutorialComponent,
    children: [
      { path: '/chapter/:id',  component: chapterComponent },
      { path: '', component: chapterComponent }
    ]
  }
];

export const tutorialRouting = RouterModule.forChild(tutorialRoutes);

教程.component.ts：

@Component({
  selector: 'tutorial',
  template: `
  <div class="content row">
    <div class="chapters col s3">
        <h3>Chapters:</h3>
        <a *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter" [routerLink]="['/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
    </div>
    <div class="col s9">
        <h1>Tutorial</h1>
        <router-outlet></router-outlet>
    </div>
  </div>`,
  styleUrls: ['app/tutorial/tutorial.css'],
  directives: [codeStepComponent, ROUTER_DIRECTIVES]
})
export class tutorialComponent {
    public chapters = _chapters; //this is an imported
    clickedItem: number = 0;
 }

因此，当我转到/tutorial时，那就没问题了，我会得到一个所有章节及其链接的列表，但是，当我单击教程中的链接（例如href="/tutorial/chapter/1"时，我会得到错误：
错误：未捕获（承诺中）：错误：无法匹配任何路由：“第/1章”
我也尝试将链接设置为tutorial/chapter，但仍然得到了相同的结果。我做错了什么？
更新：
如果您想查看完整的项目，here是指向我的完整项目回购协议相关部分的链接。

最佳答案

你好像走错了路。更改此行：

  { path: '/chapter/:id',  component: chapterComponent },

进入这个：

  { path: 'chapter/:id',  component: chapterComponent },

此外，在根路由表（app.routes.ts）中，必须添加以下行：

  { path: 'tutorial', loadChildren: 'tutorial/tutorial.module', pathMatch: 'prefix'}

为了显示角度，它应该尝试找到你的孩子模块。检查此示例：http://angularjs.blogspot.com/2016/08/angular-2-rc5-ngmodules-lazy-loading.html

关于angular - Angular2模块无法匹配组件子路线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38895517/