angular 2 rc1 - how to properly use router

I'm writing an angular2-meteor application using typescript.

angular2-meteor 0.5.5 now supports angular 2.0.0-rc1

this is my updated app.ts

import 'reflect-metadata';
import 'zone.js/dist/zone';
import {Component,provide} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, Routes} from '@angular/router';

import {MdToolbar} from '@angular2-material/toolbar';
import {MdButton} from '@angular2-material/button';
import {Welcome} from './imports/pages/welcome/welcome';
import {AddDrink} from './imports/pages/add-drink/add-drink';

@Component({
 selector: 'app',
 templateUrl: 'client/app.html',
 directives: [MdToolbar,MdButton,ROUTER_DIRECTIVES],
 providers: [ROUTER_PROVIDERS,provide(APP_BASE_HREF, { useValue: '/' })]
})
@Routes([
 { path: '/', component: Welcome },
 {path: '/add-drink',component:AddDrink}  
])
class MyAlcoholist { }

bootstrap(MyAlcoholist);

this is my main index.html file:

<body>
 <app></app>
</body>

and this is the main component html file:

<md-toolbar [color]="primary">
 <span>MyAlcoholist</span>&nbsp;
 <button md-raised-button color="primary">Home</button>&nbsp;
 <button md-raised-button color="primary">Add Drink</button>&nbsp;
 <span class="span-fill-remaining-space"></span>
 <login-buttons></login-buttons>
</md-toolbar>
<router-outlet></router-outlet>

now that I try to browse the application i get lots of errors:

EXCEPTION: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4
VM1477:27 EXCEPTION: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:296(anonymous function) @ dynamics_browser.js:51ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ ng_zone_impl.js:45ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.js:36ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:86 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4
VM1477:27 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 STACKTRACE:window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4
at resolvePromise (zone.js:538)
at zone.js:574
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at XMLHttpRequest.ZoneTask.invoke (zone.js:426)window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:60(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Unhandled Promise rejection: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4 ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'href' since …d Drink</button>&nbsp;↵    <s"): MyAlcoholist@3:4", stack: "Error: Template parse errors:↵Can't bind to 'href'…234901849e8c5cb714d4f3d3e1d96da396c529c:45368:38)"}window.console.error @ VM1477:27consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Error: Uncaught (in promise): Template parse errors:(…)window.console.error @ VM1477:27consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Unhandled Promise rejection: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'href' since …d Drink</button>&nbsp;↵    <s"): MyAlcoholist@3:4", stack: "Error: Template parse errors:↵Can't bind to 'href'…234901849e8c5cb714d4f3d3e1d96da396c529c:45368:38)"}window.console.error @ VM1477:27consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Error: Uncaught (in promise): Template parse errors:(…)window.console.error @ VM1477:27consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

my package.json contains the following:

{
  "name": "myalcoholist-meteor",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular2-material/button": "^2.0.0-alpha.4",
    "@angular2-material/core": "^2.0.0-alpha.4",
    "@angular2-material/toolbar": "^2.0.0-alpha.4",
    "angular2-meteor": "^0.5.5",
    "angular2-meteor-auto-bootstrap": "^0.5.5",
    "es6-shim": "^0.35.0",
    "meteor-node-stubs": "^0.2.3",
    "reflect-metadata": "=0.1.2",
    "rxjs": "=5.0.0-beta.6",
    "zone.js": "^0.6.12"
  }
}

now.. when I remove the [routerLink] property from the html, the errors goes away. am I not using it right ?

Solution

update

This is (currently) not valid in the new router:

<button md-raised-button color="primary" [routerLink]="['/Welcome']">

use instead

<a md-raised-button color="primary" [routerLink]="['/Welcome']">

Also ensure /Welcome is a path a route is registered for. The new router uses paths onyl to navigate to, there are no route names anymore (some suspicion of mine because the uppercase W)

original

The import has changed.

Use instead

import {APP_BASE_HREF } from '@angular/common';