Unable to map routes to child routes and new angular 2 RC1 router

Question

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> 

When I click on "Create" routerLink, I get this error:

Mistake

 EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'create'. Available routes: ['/']. 

Why is the child route not loaded? Why is the / create route not in an accessible array of routes?

Answer 1

Update

This is no longer relevant in the new V3-beta.2 router.

Original

Edit

 @Routes([ {path: '', component: SchoolyearsHomeComponent}, {path: '/create', component: CreateSchoolyearComponent} ]) 

to

 @Routes([ {path: '/create', component: CreateSchoolyearComponent}, {path: '', component: SchoolyearsHomeComponent}, ]) 

Currently, the order of the routes is significant. The most specific routes should be first, the last last are specific routes. This is a known issue and should be fixed soon.

Answer 2

You must remove the leading '/', the new router processes it for you.

 @Routes([ {path: 'create', component: CreateSchoolyearComponent}, {path: '', component: SchoolyearsHomeComponent}, ]) 

Answer 3

You need to enter the router into the application component, for example:

  export class AppComponent { constructor(private router: Router) {} } 

This is usually necessary if the template associated with this component does not use the <router-link> directive. A recent Angular change does not load the router component only when using <router-outlet>

Answer 4

It seems that the order of the routes mentioned in @Routes is remarkable. Most specific routes should be the first, least specific routes in the past. Depending on this, change @Routes to this

 @Routes([ {path: '/create', component: CreateSchoolyearComponent}, {path: ' ', component: SchoolyearsHomeComponent}, ])`