Menu
Obviously the beta for Angular2 is newer than new, so there's not much information out there, but I am trying to do what I think is some fairly basic routing.
Hacking about with the quick-start code and other snippets from the https://angular.io website has resulted in the following file structure:
angular-testapp/ app/ app.component.ts boot.ts routing-test.component.ts index.html With the files being populated as follows:
index.html
<html> <head> <base href="/"> <title>Angular 2 QuickStart</title> <link href="../css/bootstrap.css" rel="stylesheet"> <!-- 1. Load libraries --> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html> boot.ts
import {bootstrap} from 'angular2/platform/browser' import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component' bootstrap(AppComponent, [ ROUTER_PROVIDERS ]); app.component.ts
import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'; import {RoutingTestComponent} from './routing-test.component'; @Component({ selector: 'my-app', template: ` <h1>Component Router</h1> <a [routerLink]="['RoutingTest']">Routing Test</a> <router-outlet></router-outlet> ` }) @RouteConfig([ {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true}, ]) export class AppComponent { } routing-test.component.ts
import {Component} from 'angular2/core'; import {Router} from 'angular2/router'; @Component({ template: ` <h2>Routing Test</h2> <p>Interesting stuff goes here!</p> ` }) export class RoutingTestComponent { } Attempting to run this code produces the error:
EXCEPTION: Template parse errors: Can't bind to 'routerLink' since it isn't a known native property (" <h1>Component Router</h1> <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a> <router-outlet></router-outlet> "): AppComponent@2:11 I found a vaguely related issue here; router-link directives broken after upgrading to angular2.0.0-beta.0. However, the "working example" in one of the answers is based on pre-beta code - which may well still work, but I would like to know why the code I have created is not working.
Any pointers would be gratefully received!
690
>=RC.5
import the RouterModule See also https://angular.io/guide/router
@NgModule({ imports: [RouterModule], ... }) >=RC.2
app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router'; export const routes: RouterConfig = [ ... ]; export const APP_ROUTER_PROVIDERS = [provideRouter(routes)]; main.ts
import { bootstrap } from '@angular/platform-browser-dynamic'; import { APP_ROUTER_PROVIDERS } from './app.routes'; bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]); <=RC.1
Your code is missing
@Component({ ... directives: [ROUTER_DIRECTIVES], ...)} You can't use directives like routerLink or router-outlet without making them known to your component.
While directive names were changed to be case-sensitive in Angular2, elements still use - in the name like <router-outlet> to be compatible with the web-components spec which require a - in the name of custom elements.
register globally
To make ROUTER_DIRECTIVES globally available, add this provider to bootstrap(...):
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true}) then it's no longer necessary to add ROUTER_DIRECTIVES to each component.
148
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
