Cannot match any routes with child routes and new angular 2 RC1 router
11,906
Solution 1
Update
This is not relevant anymore in the new V3-beta.2 router.
Original
Change
@Routes([
{path: '', component: SchoolyearsHomeComponent},
{path: '/create', component: CreateSchoolyearComponent}
])
to
@Routes([
{path: '/create', component: CreateSchoolyearComponent},
{path: '', component: SchoolyearsHomeComponent},
])
The order of routes is currently significant. The most specific routes should come first, the least specific routes last. This is a known issue and should be fixed soon.
Solution 2
You must remove the leading '/', the new router handles it for you.
@Routes([
{path: 'create', component: CreateSchoolyearComponent},
{path: '', component: SchoolyearsHomeComponent},
])
Comments
-
Pascal over 1 year
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 the "Create" routerLink I get this error:
Error
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 the available array of routes?
-
Pascal almost 8 yearsThis did not help. I get the same error message. The current segemnt "create" is not in the available routes. You seemed to know my goal, but to make sure: I want to replace the schoolyears.component.html with the create.schoolyear.component.html by navigating to 'create' url.
-
Pascal almost 8 yearsThis did not help. I get the same error message. The current segemnt "create" is not in the available routes.
-
Günter Zöchbauer almost 8 yearsSeems to work fine in plnkr.co/edit/oksKwNmGvubDlpV45yEB?p=preview . Can you try to reproduce your problem with this Plunker?
-
Pascal almost 8 yearsI hope I added the routerLink (which you forgot in your sample) at the correct place: plnkr.co/edit/vjCbsqZazr0rp77xjnSm?p=preview NOTHING happens at the moment when you click it? Can we proceed please with my link?
-
Günter Zöchbauer almost 8 yearsSeems the router has troubles with routes that have a path of
''
. This way it's working plnkr.co/edit/c8BeO2VsjScuF4rkCbUi?p=preview -
Pascal almost 8 yearsThanks, I anyway wanted to have a path value like 'schoolyears' so I do not care about that bug ;-) but I have still one question, why does the child component 'create' not show the full path up to the parent in the url? => /schoolyears/create ? This worked correctly before the rc1 migration with the "..." route at the schoolyears parent path.
-
Günter Zöchbauer almost 8 yearsNot sure what you mean. "not show" where? In Plunker? Maybe you want to open "Launch the preview in a separate window" (blue resize button in the top-right of the output area) to see the full path. Otherwise it is running in an iframe and the main window doesn't show URL updates..
-
Pascal almost 8 yearsTo make it more clear :-) => stackoverflow.com/questions/37620359/…
-
Daniel Ram almost 8 yearsI have tested this out, and this seems to be correct!