Angular2-例外：路由配置應僅包含一個“組件”

Question

我有兩個簡單的頁面，我正在導航到在angular2中使用路由。 但似乎我收到以下異常：

例外：路由器實例化期間出錯！ （RouterLink->路由器）。

原來的例外：路由配置應僅包含一個“ component”，“ loader”或“ redirectTo”屬性。

這是文件

page1.ts

import {Component} from 'angular2/core';

@Component({
    selector: "page1",
    template: `page 1 goes here.`
})
export class Page1Cmp{} 

page2.ts

import {Component} from 'angular2/core';

@Component({
    selector: "page2",
    template: `page 2 goes here.`
})
export class Page2Cmp{}

應用程序

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

@Component({
    selector: "app",
    template: `<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true},
    {path: "/page2", name: "Page2", component: Page2Cmp}
])
class MyApp{}

bootstrap(MyApp, [
    ROUTER_PROVIDERS
]);

我在這里重現了問題

有什么想法嗎？

Answer 1

這個很困難也很有趣。。。

你的問題是你的進口，看看他們

import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

看到不對嗎？ 不，沒事吧？

現在看看那些文件

page1.ts

export class Page2Cmp{}

page2.ts

export class Page1Cmp{}

你現在看到了嗎？ 是! 類名與對應的文件名：P不對應，因此您要導入每個文件中都不存在的類。

因此，您可以將Page1Cmp移至page1.ts ，將Page2Cmp移至page2.ts 。

這是您的plnkr工作。

實際上，我花了幾分鍾才看到它，它非常隱蔽：P