web-dev-qa-db-ja.com

Angular 2ルーターエラー：「HomePage」を読み上げるためのプライマリーアウトレットが見つかりません

私はちょうど新しいルーティングライブラリ（@ angular/router v3.0.0-alpha.7）を使い始めましたが、公式 docs に従うと以下のエラーにつながります。

browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage'

質問です。エラーを取り除き、ルーターを予想どおりに動作させるにはどうすればよいですか。設定を逃しましたか？

（alpha 6バージョンを使用しているときも同じエラーが表示されます。）

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'app',
    template: `
        <p>Angular 2 is running...</p>
        <!-- Routed views go here -->
        <router-outlet></router-outlet>
    `,
    providers: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { HomePage } from './pages/home/home';

export const routes: RouterConfig = [
    { path: '', component: HomePage }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

home.ts

import { Component } from '@angular/core';

@Component({
    template: '<h1>Home Page</h1>'
})
export class HomePage {
}

main.ts

/* Avoid: 'error TS2304: Cannot find name <type>' during compilation */
///<reference path="../../typings/index.d.ts" />

import { bootstrap } from "@angular/platform-browser-dynamic";
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from "./app.component";

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
]).catch(err => console.error(err));
angularrouter
77
David

app.component.tsにエラーがあります。provider配列でディレクティブを宣言したようです。

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'app',
    template: `
        <p>Angular 2 is running...</p>
        <!-- Routed views go here -->
        <router-outlet></router-outlet>
        `,
     directives: [ROUTER_DIRECTIVES] //here
})
export class AppComponent {
}
71
KB_

@JS_astronautsはすでに解決策を提供していますが、エラーを説明することは有益であると思います...

AngularがHTMLテンプレートを解析して ディレクティブRouterOutlet を見つけたとき、つまりRouterOutletのセレクタ：<router-outlet></router-outlet>を見つけたときに、プライマリアウトレットが設定されます。

テンプレートには<router-outlet></router-outlet>が含まれていますが、コンポーネントにはdirectives: [ROUTER_DIRECTIVES]が含まれていないため、Angularはその定数で定義されているディレクティブを探しません。

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
 RouterLinkActive];

そのため、AngularがAppComponentのHTMLテンプレートを解析するとき、<router-outlet></router-outlet>を認識できない場合は無視します。その後、Angularがデフォルトのルートコンポーネント（HomePage）をレンダリングしようとすると、どこに配置すればよいのかわからないため、エラーが発生します。

このエラーは、要素セレクタにタイプミスがある場合にも起こり得ます。例えば：

<roter-outlet></roter-outlet>

この場合、directives配列が正しく設定されていても、Angularは必要な<router-outlet>要素を見つけることはありません。

85
Mark Rajcok

providersではなくdirectives metadataにします。

directives: [ROUTER_DIRECTIVES]
7
micronyks

このエラーは、ライブサーバーで公開したときにだけランダムに発生します。現地で仕事をしているとき、私はこれを経験したことがありません。私がランダムに言ったとき、時々それはうまくいく、例えば私がリフレッシュしたとき、それは上で言及されたそしてそのスクリーン上にただ記号を表示するそのエラーを投げる。私はAngular 2に取り組んでいます。

どんなガイダンス/助けも大いに認められるでしょう。

1
Simon Azzopardi