ApplicationComponent
import { Component } from '@angular/core';
import {Router, ROUTER_DIRECTIVES, Routes, ROUTER_PROVIDERS} from '@angular/router';
import {SchoolyearsComponent} from "./schoolyear/schoolyears.component";
@Component({
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS
],
templateUrl: './app/application.component.html',
styleUrls: ['./app/application.component.css']
})
@Routes([
{
path: '/',
component: SchoolyearsComponent,
},
])
export class ApplicationComponent {}
SchoolyearsComponent
import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { SchoolyearsHomeComponent } from './schoolyears.home.component';
import { CreateSchoolyearComponent } from './create.schoolyear.component';
@Routes([
{
path: '',
component: SchoolyearsHomeComponent,
},
{
path: '/create',
component: CreateSchoolyearComponent
}
])
@Component({ template: `<router-outlet></router-outlet>`, directives: [ROUTER_DIRECTIVES]})
export class SchoolyearsComponent {
}
schoolyears.component.html
<h3>Schoolyears</h3>
<div>
<a [routerLink]="['/create']">Create</a>
</div>
<table>
<tr *ngFor="let s of schoolyears" (click)="createSchoolyear()">
<td>{{s.id}}</td>
<td>{{s.name}}</td>
<td>{{s.startDate}}</td>
<td>{{s.endDate}}</td>
</tr>
</table>
Upon clicking the "Create" routerLink, an error is triggered:
Error
EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'create'. Available routes: ['/'].
Why is the child route not loading? Why does the /create route not appear in the list of available routes?