javascript - Angular2 - 异常 : Route config should contain exactly one "component"

Question

我有两个简单的页面，我正在使用 angular2 中的路由导航到它们。但看起来我遇到了以下异常:

EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).

ORIGINAL EXCEPTION: Route config should contain exactly one "component", "loader", or "redirectTo" property.

这是文件

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

app.ts

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
]);

我在 plunkr here 上重现了该问题

有什么想法吗？

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