Angular2路由错误：找不到主要出口以加载“HomePage”。

Question

我刚开始使用新的路由库（@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));

- David

---

由于丢失了 '<router-outlet></router-outlet>' 模板，我也遇到了同样的错误。 这可能也是由于在 '<router-outlet></router-outlet>' 中打错字导致的。 - Rajiv Bhardwaj

Answer 1

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

- Mark Rajcok

---

对于使用较新版本的人，需要注意：在RC6中，@Component的'directives'属性已被移除。https://dev59.com/IlkS5IYBdhLWcg3wlnvg - Will

你的元素选择器中有错别字：或者如果你的模板完全缺少该标签... - Joshua Drake

另外注意：如果你在复制粘贴，请确保代码中包含 <router-outlet></router-outlet>。开头和结尾标签中的 u 字母不能省略。 - ntgCleaner

遗憾的是，从 “roter” 到 “router”的更正并未达到最小字符更改要求。 - aland

Answer 2

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

- KB_

---

我加上了 <router-outlet></router-outlet> ，错误已得到解决。即使在 @Component 部分没有 directives: [ROUTER_DIRECTIVES]，我也没有收到错误。 - Rajiv Bhardwaj

ROUTER_DIRECTIVES对于Angular 2不再相关。https://angular.io/docs/ts/latest/guide/router.html - Dipendu Paul

Answer 3

应该使用指令元数据而不是提供商。

directives: [ROUTER_DIRECTIVES]

- micronyks

Answer 4

我在发布到线上服务器时随机遇到这个错误，但在本地工作时从未遇到过。当我说随机时，有时它可以正常工作，例如当我刷新页面时，它会抛出上述错误并在屏幕上显示符号。 我正在使用Angular 2。

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

- Simon Azzopardi