Angular2 Router错误：找不到主插座以加载“ HomePage”

我刚刚开始使用新的路由库（@ angular / router v3.0.0-alpha.7），但是遵循官方文档会导致以下错误：

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

主要

/* 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));

您在app.component.ts 外观上有一个错误，就像您在providers数组中声明了一条指令一样。

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

尽管@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>元素。

应该directives metadata不是providers，

directives: [ROUTER_DIRECTIVES]

仅当我在实时服务器上发布时，我才随机遇到此错误。我在本地工作时从未经历过这种情况。当我随意说时，有时工作得很好，例如，当我刷新时，它会抛出上述错误并仅在屏幕上显示符号。我正在研究Angular 2。

任何指导/帮助将不胜感激。