Angular2 - 例外：Route configには正確に1つの "component"が含まれている必要があります

Question

angular2でルーティングを使用する2つの単純なページがあります。しかし、次の例外が発生しているようです：

例外：ルータのインスタンス化中にエラーが発生しました！ （RouterLink - > Router）。

オリジナルの例外：ルートコンフィグレーションには、「コンポーネント」、「ローダ」、または「redirectTo」プロパティが1つだけ含まれている必要があります。ここで

ファイルが

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

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