Angular 2 RC1 - как правильно использовать роутер

Я пишу приложение angular2-meteor с использованием машинописи.

angular2-meteor 0.5.5 теперь поддерживает angular 2.0.0-rc1

это мой обновленный 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);

это мой основной файл index.html:

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

и это основной компонент HTML-файл:

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

теперь, когда я пытаюсь просмотреть приложение, я получаю много ошибок:

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

мой package.json содержит следующее:

{
  "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"
  }
}

сейчас.. когда я снимаю [routerLink] свойство из HTML, ошибки исчезают. я не использую это правильно?

Источник

2 ответа

Решение

Обновить

Это (в настоящее время) не действует в новом маршрутизаторе:

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

использовать вместо

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

Также убедитесь, /Welcome путь, для которого зарегистрирован маршрут. Новый маршрутизатор использует пути onyl для навигации, больше нет названий маршрутов (некоторые подозрения мои, потому что прописные буквы W)

оригинал

Импорт изменился.

Используйте вместо

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

Смотрите также Location и HashLocationStrategy перестали работать в бета.16

Источник

Другой альтернативой для установки базового href является использование

<base href="/">

Попробуйте поместить этот тег внутри тега head в главном компоненте и попробуйте, если это решит вашу проблему

Источник
Другие вопросы по тегам