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?
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 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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With