My web app is built using Angular 2 and has a submodule named tutorial with its own sub-router to navigate through different chapters. Below is the structure of my application:
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 {}
tutorial.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);
tutorial.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;
}
Visiting /tutorial displays a list of all chapters and their links. However, upon clicking a specific link such as href="/tutorial/chapter/1", I encounter the following error:
Error: Uncaught (in promise): Error: Cannot match any routes: 'chapter/1'
I have also tried changing the links to tutorial/chapter but the issue persists. What could be causing this problem?
Update:
If you'd like to view the complete project, check out the relevant section in my GitHub repository here.