Angular2注入器导致Exception No Provier For Router错误

时间:2017-05-09 00:10:20

标签: angular dependency-injection angular2-services

我的Angular2 app.component.ts

中有以下代码
import { Component , OnInit} from '@angular/core';
import { WebService } from './webservices/webservices.services';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';
import {HttpModule} from '@angular/http';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [WebService]
})
export class AppComponent implements OnInit {

  //constructor(private http: Http,  private webservice: WebService/*, private router: Router*/) { }
  title: string = 'My first angular2-google-maps project';
  lat: number = 45.478418;
  lng: number = -122.209007;
  public ngOnInit(){

  }
/*  public getData(){
    this.webservice.getDataFromBackend()
      .subscribe(
      (data) => this.handleData(data),
     // (err) => this.logError(err),
      () => console.log('got data')
      );
  }

    private handleData(data: Response) {
    if (data.status === 200) {
      let receivedData = data.json();
      console.log(receivedData);
    }
    console.log(data.json());
  }
*/




}

当我取消注释构造函数时,我在浏览器中得到了一堆错误(注释掉了构造函数的工作原理),如

  

例外:没有路由器提供商!   和

     

错误:未捕获(在承诺中):错误:DI错误   BaseError @ http://localhost:4200/vendor.bundle.js:25127:20 [angular]

。这是为什么?

编辑:app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { AgmCoreModule } from 'angular2-google-maps/core';



@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    AgmCoreModule.forRoot({
      apiKey: 'Google Maps API Key'
    })
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

1 个答案:

答案 0 :(得分:0)

您忘记导入RouterModule

@NgModule({
  imports: [
  BrowserModule,
  CommonModule,
  FormsModule,
  HttpModule,
  RouterModule // <== here
  // ...
  ],
})