Angular2路由器错误：找不到要加载的主出口'；主页'；

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

home.ts

从'@angular/core'导入{Component}；
@组成部分({
模板：“主页”
})
导出类主页{
}

梅因酒店

/*在编译过程中避免：“错误TS2304:找不到名称”*/
///
从“@angular/platform browser dynamic”导入{bootstrap}”；
从“/APP.routes”导入{APP_路由器_提供者}；
从“/app.component”导入{AppComponent}；
引导程序（AppComponent[
应用程序路由器提供商，
]).catch（err=>console.error（err））；

您的

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>
        `,
     directives: [ROUTER_DIRECTIVES] //here
})
export class AppComponent {
}

从'@angular/core'导入{Component}；
从“@angular/ROUTER”导入{ROUTER_DIRECTIVES}”；
@组成部分({
选择器：“应用程序”，
模板：`
角度2正在运行

`,
指令：[路由器指令]//此处
})
导出类AppComponent{
}

它应该是

指令元数据

，而不是

提供者

directives: [ROUTER_DIRECTIVES]

---

虽然@JS_宇航员已经提供了一个解决方案，但我认为解释一下这个错误会很有启发性

当Angular解析HTML模板并找到时，即当它找到RouterOutlet的选择器：

时，设置主出口

尽管您的模板确实包含

，但您的组件不包含

指令：[ROUTER\u directives]

，因此Angular不会查找该常量定义的任何指令：

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

因此，当Angular解析AppComponent的HTML模板时，如果它不能识别

，那么它就会忽略它。稍后，当Angular尝试渲染默认路由组件（主页）时，它会抱怨，因为它不知道将其放置在何处

---

如果元素选择器中有输入错误，也可能发生此错误，例如：

<roter-outlet></roter-outlet>

---

在这种情况下，即使您的

指令

数组设置正确，Angular也永远找不到所需的

元素。

我只是在实时服务器上发布时随机遇到此错误。我在当地工作时从未经历过这种情况。当我随机地说，有时它工作正常，例如当我刷新时，它抛出上面提到的错误，只是在屏幕上显示符号。 我正在研究Angular 2

---

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

对于使用更高版本的用户，请注意，@Component的“directives”属性已在RC6中删除。在元素选择器中重新键入：或者如果您的模板完全缺少标记……另一个注意事项：如果您正在复制和粘贴，则应显示

。在开始和结束标记中缺少

u

。从roter到router的更正不符合最低字符更改要求。由于缺少

'

的模板，我有相同的错误。这可能也是由于

'

中的打字错误。我的错误在添加

时得到解决。即使@Component节中没有

指令：[ROUTER\u指令]

，也不会出现错误。ROUTER\u指令与angular 2不再相关。

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

directives: [ROUTER_DIRECTIVES]

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

<roter-outlet></roter-outlet>