Cannot match any routes with 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 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?

Günter Zöchbauer · Accepted Answer · 2016-07-29T09:11:40.063

7

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.

edited Jul 29 '16 at 09:11

answered Jun 02 '16 at 05:13

Günter Zöchbauer

623,577
216
2,003
1,567

This 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 Jun 02 '16 at 05:58
Seems to work fine in https://plnkr.co/edit/oksKwNmGvubDlpV45yEB?p=preview . Can you try to reproduce your problem with this Plunker? – Günter Zöchbauer Jun 02 '16 at 06:30
I hope I added the routerLink (which you forgot in your sample) at the correct place: https://plnkr.co/edit/vjCbsqZazr0rp77xjnSm?p=preview NOTHING happens at the moment when you click it? Can we proceed please with my link? – Pascal Jun 02 '16 at 16:32
Seems the router has troubles with routes that have a path of `''`. This way it's working https://plnkr.co/edit/c8BeO2VsjScuF4rkCbUi?p=preview – Günter Zöchbauer Jun 02 '16 at 16:59
Thanks, 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. – Pascal Jun 03 '16 at 06:15
Not 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.. – Günter Zöchbauer Jun 03 '16 at 06:22
To make it more clear :-) => http://stackoverflow.com/questions/37620359/disply-the-path-of-the-sibling-route-in-the-url-bar-when-the-other-sibling-route – Pascal Jun 03 '16 at 17:31

score 3 · Answer 2 · answered Jun 24 '16 at 15:20

3

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

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

answered Jun 24 '16 at 15:20

Gallaecio

3,620
2
25
64

I have tested this out, and this seems to be correct! – Daniel Ram Jul 12 '16 at 21:47

score 0 · Answer 3 · answered Jun 01 '16 at 22:46

0

You need to inject the router into the app component, something like this:

 export class AppComponent {

  constructor(private router: Router) {}

}

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

answered Jun 01 '16 at 22:46

DeborahK

57,520
12
104
129

This did not help. I get the same error message. The current segemnt "create" is not in the available routes. – Pascal Jun 02 '16 at 06:01

score 0 · Answer 4 · answered Jun 27 '16 at 22:15

Looks like the order of routes we mention in @Routes is notable. The most specific routes should come first, the least specific routes last.Depending on it change your @Routes to this

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

Cannot match any routes with child routes and new angular 2 RC1 router

4 Answers4