Angular2 路由器错误：找不到加载“主页”的主要出口答案

【问题标题】：Angular2 Router error: cannot find primary outlet to load 'HomePage'Angular2 路由器错误：找不到加载“主页”的主要出口
【发布时间】：2023-03-06 15:08:01
【问题描述】：

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

【问题讨论】：

由于缺少'<router-outlet></router-outlet>' 的模板，我遇到了同样的错误这也可能是由于'<router-outlet></router-outlet>' 中的拼写错误

标签： angular router

【解决方案1】：

虽然@JS_astronauts 已经提供了解决方案，但我认为解释错误会很有启发性......

当 Angular 解析 HTML 模板并找到 directive 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> 元素。

【讨论】：

对于使用更高版本的任何人的注意事项：@Component 的 'directives' 属性已在 RC6 中删除。 stackoverflow.com/questions/39658186/…
在您的元素选择器中重新输入错误：或者如果您的模板只是缺少标签...
另一个注意：如果你是复制和粘贴，它应该说<router-outlet></router-outlet>。它在开始和结束标签中缺少u
遗憾的是，从 roter 到 router 的更正没有最低字符更改要求

【解决方案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 {
}

【讨论】：

我的错误在我添加 <router-outlet></router-outlet> 时得到了解决。即使@Component 部分中没有directives: [ROUTER_DIRECTIVES]，也不会出错。
ROUTER_DIRECTIVES 与角度 2 不再相关。angular.io/docs/ts/latest/guide/router.html

【解决方案3】：

应该是directives metadata 而不是providers，

directives: [ROUTER_DIRECTIVES]

【讨论】：

【解决方案4】：

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

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

【讨论】：