2
私はtypescriptを使ってangular2-meteorアプリケーションを書いています。角度2 rc1 - ルータを正しく使う方法
<body>
<app></app>
</body>
angular2-流星0.5.5は今角度2.0.0-RC1に
をサポートし、これは、これは私のメインのindex.htmlファイルである私の更新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);
です
これは主要コンポーネントのhtmlファイルです：
<md-toolbar [color]="primary">
<span>MyAlcoholist</span>
<button md-raised-button color="primary">Home</button>
<button md-raised-button color="primary">Add Drink</button>
<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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]:4 ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'href' since …d Drink</button> ↵ <s"): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>
<button "): [email protected]: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>
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>
<s"): [email protected]:4 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'href' since …d Drink</button> ↵ <s"): [email protected]: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"
}
}
..私は、HTMLから[routerLink]プロパティを削除する場合、エラーは消え去る。私はそれを正しく使用していないのですか？
申し訳ありませんが、質問に関連はなく、ROUTER_PROVIDERSはあなたのために働くんでありませんか？私はプロバイダとしてそれを使用するたびに、私はそれが働く前に、私のアプリでエラーをスローします。 – tibbus
@tibbus - 残念ながら、私はそれが動作するかどうかを完全にテストすることができませんでした – ufk
新しいルータで現在 ''は 'routerLink'になる可能性があります –