Angular 2 中没有路由器提供商

Question

作为新手，我在 Angular 2 中设置路由时遇到问题。虽然我很确定，但这是我所缺少的非常基本的东西。

我只想 App Component 加载并显示标题。在它的正下方，一个 link 将加载 router-outlet 部分中的 contact-list component。

import { Component,OnInit } from '@angular/core';
import { Contact } from './contact';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <a routerLink="/contact-list">Contact List</a>
    <router-outlet></router-outlet>
    `
})
export class AppComponent{
  title = 'Welcome to my Dream App!';
}

这是app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ContactCardComponent } from './contact-card.component';
import { ContactsListComponent } from './contacts-list.component';

RouterModule.forRoot([
  {
    path:'',
    redirectTo:'app',
    pathMatch:'full',
  },
  {
    path:'app',
    component:AppComponent
  },
  {
    path:'contact-list',
    component:ContactsListComponent
  },
  {
    path:'contact-details/:id',
    component:ContactCardComponent
  }
]);

@NgModule({
  declarations: [
    AppComponent,
    ContactsListComponent,
    ContactCardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是是说：

error_handler.js:54 EXCEPTION: Error in ./AppComponent class AppComponent - inline template:2:4 caused by: No provider for Router!

没有路由器提供商。

我做错了什么？

更新：

如果我这样做：

  template: `
    <h1>{{title}}</h1>
    <contacts-list></contacts-list>
    `

在app.component.ts中，它工作正常。

解决方案发布后，我看到重复的行：

Answer 1

您应该将 RouterModule 导入您的模块定义和 "imports" 数组：

const ROUTES = [
  // HERE ROUTES DEFINITIONS
]

@NgModule({
    imports: [
        RouterModule.forChild(ROUTES)
    ],
    declarations: [],
    providers: []
})
export default class YourModuleDefinition{

}

因此您的代码应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ContactCardComponent } from './contact-card.component';
import { ContactsListComponent } from './contacts-list.component';

@NgModule({
   declarations: [
     AppComponent,
     ContactsListComponent,
     ContactCardComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     RouterModule.forRoot([
       {
          path:'',
          redirectTo:'app',
          pathMatch:'full',
       },
       {
          path:'app',
          component:AppComponent
       },
       {
          path:'contact-list',
          component:ContactsListComponent
       },
       {
          path:'contact-details/:id',
          component:ContactCardComponent
        }
     ]);
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

具有提供的配置并添加到导入数组的 RouterModule 的 forRoot static class 方法提供模块的路由问题。

更多信息在这里：https://angular.io/guide/ngmodule

Angular 2 中没有路由器提供商

No Provider for router in Angular 2

javascript

angular-routing

angular-providers

angular