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

Question is - how do I get rid of the error and make the router behave as expected? Have I missed a setting?

(使用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));

推荐答案

你的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相关问答推荐

HTTP Get请求未发送到提供的URL

为什么这个拦截器只在发送事件上触发,而不是在实际响应上触发?

是否自动处理Angular /RxJS观测数据的取消订阅

如何将Angular 服务包含在延迟加载的独立组件路由中?

在Cypress中,对xlsx文件的读取并不总是正确的

bootstrap 可折叠菜单在单击时未展开.Angular 应用程序

如何在AngularJs中剪断细绳

如何使用Angular 将图像作为二进制数据发送到我的API?

Angular 组件存储,为什么我的效果可以';在http错误后不会被触发?

完成行为主体

VSCode 调试器空白页面并在使用 VS Code 1.76.1 和 Chrome 111 启动时加载

刷新页面导致 401 错误-Angular 8

使用 Jasmine 和 Karma 对 Angular 进行单元测试,错误:无法绑定到xxx,因为它不是xxxxxx的已知属性.

如何以Angular 获取嵌套表单组的控件

如何添加/设置环境 Angular 6 angular.json 文件

Angular2 Base64 清理不安全的 URL 值

Angular为 4 的可扩展表格行,带有Angularmaterial

angular2中的httpinterceptor类似功能是什么?

没有 ChildrenOutletContexts 的提供者 (injectionError)

如何在 Angular 中使用 router.navigateByUrl 和 router.navigate