Angular2路由器错误: 无法找到加载“ HomePage”的主插座

我刚开始使用新的路由库(@angle/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版本时会出现同样的错误。)

应用程序组件

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

应用程序路由

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)
];

家

import { Component } from '@angular/core';


@Component({
template: '<h1>Home Page</h1>'
})
export class HomePage {
}

Mats

/* 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));
82171 次浏览
小开
最佳答案

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

应该是 directives metadata而不是 providers,

directives: [ROUTER_DIRECTIVES]
小开

虽然@JS _ 宇航员已经提供了一个解决方案，我认为解释这个错误是有益的..。

当 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>元素。

小开

只有在活动服务器上发布时，才会随机出现此错误。我在本地工作时从未经历过这种情况。当我说随机的时候，有时候它工作得很好，例如，当我刷新的时候，它抛出上面提到的错误，只是在屏幕上显示符号。 我在研究角度2。

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


提交答案