Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 568
Pascal Avatar asked Jun 01 '16 21:06

Pascal


People also ask

How do I enable Angular routing?

Add the AppRoutingModule link The router is dedicated to routing and imported by the root AppModule . By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app directory. Run ng generate to create the application routing module.

What is ActivatedRoute in Angular?

What is an activated route? The Angular Docs define the ActivatedRoute as. A service that is provided to each route component that contains route specific information such as route parameters, static data, resolve data, global query params and the global fragment.

Which directive is used to display the component matched by routes?

The Router-Outlet is a directive that's available from the router library where the Router inserts the component that gets matched based on the current browser's URL.


1 Answers

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.

like image 93
Günter Zöchbauer Avatar answered Sep 23 '22 15:09

Günter Zöchbauer