Lỗi bộ định tuyến Angular2: không thể tìm thấy ổ cắm chính để tải 'Trang chủ'

Tôi vừa mới bắt đầu sử dụng thư viện định tuyến mới (@ angle / router v3.0.0-alpha.7) nhưng làm theo các tài liệu chính thức dẫn đến lỗi bên dưới:

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

Câu hỏi đặt ra là - làm cách nào để loại bỏ lỗi và làm cho bộ định tuyến hoạt động như mong đợi? Tôi đã bỏ lỡ một thiết lập?

(Lỗi tương tự xuất hiện khi sử dụng phiên bản 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));

Bạn gặp lỗi trong app.component.ts Có vẻ như bạn đã khai báo một chỉ thị trong mảng nhà cung cấp.

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

Mặc dù @JS_astronauts đã cung cấp một giải pháp, tôi nghĩ rằng việc giải thích lỗi sẽ mang tính hướng dẫn ...

Các cửa hàng chính được thiết lập khi phân tích góc HTML mẫu và phát hiện chỉ thị RouterOutlet , tức là khi nó tìm thấy selector RouterOutlet của: <router-outlet></router-outlet>.

Mặc dù mẫu của bạn có chứa <router-outlet></router-outlet>, nhưng thành phần của bạn không chứa directives: [ROUTER_DIRECTIVES], vì vậy Angular sẽ không tìm kiếm bất kỳ lệnh nào được xác định bởi hằng số đó:

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

Vì vậy, khi Angular phân tích cú pháp các mẫu HTML của AppComponent, nếu nó không nhận ra <router-outlet></router-outlet>, nó sẽ bỏ qua nó. Sau đó, khi Angular cố gắng hiển thị thành phần tuyến đường mặc định (HomePage), nó phàn nàn vì không biết đặt nó ở đâu.

Lỗi này cũng có thể xảy ra nếu bạn có lỗi đánh máy trong bộ chọn phần tử của mình, ví dụ:

<roter-outlet></roter-outlet>

Trong trường hợp này, ngay cả khi directivesmảng của bạn được đặt chính xác, Angular sẽ không bao giờ tìm thấy <router-outlet>phần tử được yêu cầu .

Nó nên được directives metadatathay vì providers,

directives: [ROUTER_DIRECTIVES]

Tôi đang gặp lỗi này một cách ngẫu nhiên và chỉ khi tôi xuất bản trên máy chủ trực tiếp. Tôi chưa bao giờ trải qua điều này khi làm việc tại địa phương. Khi tôi nói ngẫu nhiên, đôi khi nó hoạt động tốt, ví dụ khi tôi làm mới, nó ném ra lỗi được đề cập ở trên và chỉ hiển thị các biểu tượng trên màn hình. Tôi đang làm việc trên Angular 2.

Bất kỳ hướng dẫn / giúp đỡ sẽ được đánh giá cao.