angular 2 rc1 - how to properly use router

Question

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 ?

Sorry, not related to the question, but does ROUTER_PROVIDERS works for you ? Whenever I used that as a provider it throws an error in my app, before it worked. — Tiberiu Popescu, May 08 '16 at 17:00
@tibbus - unfortunately i wasn't able to fully test it to see if it works — ufk, May 08 '16 at 17:10

score 3 · Accepted Answer · edited May 23 '17 at 10:30

3

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';

See also Location and HashLocationStrategy stopped working in beta.16

edited May 23 '17 at 10:30

Community

1
1

answered May 08 '16 at 18:26

Günter Zöchbauer

623,577
216
2,003
1,567

Hi. thanks for you response. updated main post with the errors i'm getting. – ufk May 08 '16 at 18:32
I don't know the error message but I guess you should use either the `` or the `provide(APP_BASE_HREF, { useValue: '/' })` method, but not both. – Günter Zöchbauer May 08 '16 at 18:34
i removed the base href tag and the error still persists. – ufk May 08 '16 at 18:40
I totally agree with @Günter Zöchbauer you have to use one of the alternatives not both . Also you can try to update your index.html as: – Elka May 08 '16 at 18:41
the errors go away when i remove the [routerLink] property. am i using it right? updating main post again – ufk May 09 '16 at 01:04

score 0 · Answer 2 · answered May 08 '16 at 17:19

0

Another alternative to set the base href is to use

<base href="/">

Try to put this tag inside the head tag in the main component and try if this solves your problem

answered May 08 '16 at 17:19

Elka

227
1
9

this is not good for nested apps that aren't at the base of the domain. – ps2goat May 09 '16 at 18:54

angular 2 rc1 - how to properly use router

2 Answers2