Question

目标：

使用navbar.component.html中的链接：

<a [routerLink]="['/applications']" routerLinkActive="active">Applications</a>

问题：

我收到错误：ORIGINAL EXCEPTION: No provider for RouterOutletMap!

背景：

navbar.component.ts

import { Component } from '@angular/core';
import { Router, RouterOutlet, RouterLink } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'navbar',
    templateUrl: 'navbar.component.html',
    styleUrls: ['navbar.component.css'],
    directives: [RouterOutlet, RouterLink]
})
export class NavbarComponent
{
    version: string;
    versionIsVisible: boolean;
    router: Router;

    constructor(router: Router) {
        this.version = '<%= VERSION %>';
        this.router  = router;
    }
}

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { NavbarComponent } from './navbar/navbar.component';
import { ApplicationComponent } from './application/application.component';

export { Config } from './config/env.config';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None,
    directives: [NavbarComponent, ApplicationComponent]
})
export class AppComponent
{
    constructor() {
        // console.log('Environment config', Config);
    }
}

app.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ApplicationComponent } from './application/application.component';

export const routes: Routes = [
    { path: '', component: ApplicationComponent },
    { path: 'applications', component: ApplicationComponent },
    { path: 'signin', component: ApplicationComponent },
    { path: 'profile', component: ApplicationComponent },
    { path: 'help', component: ApplicationComponent },
    { path: 'view/settings/:key', component: ApplicationComponent },
    // { path: '**', component: PageNotFoundComponent },
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.module.ts

import { ModuleWithProviders } from '@angular/core';
import { AppComponent } from './app.component';
import { routes, appRoutingProviders } from './app.routes';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routes
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [ AppComponent ]
})

的package.json

"dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "core-js": "^2.4.0",
    "es6-module-loader": "^0.17.8",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "0.6.13"
}

Answer 1

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routes

应该是

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routing // <== change

为什么routerLink失败？

1 个答案: