原始异常：没有Http的提供程序！在Angular2中，尝试使用HTTP.GET使用REST服务时

我试图实现的是使用HTTP.Get使用Restfull服务。在angular2中，我只是按照一些教程阅读文档，但仍然不明白

下面是我要做的，首先是我的应用程序结构，我使用Angular CLI Webpack创建了这个项目

然后，我使用angular CLI命令“ng generate service restfull”创建了一个服务类，然后我更新了我的类，因此

restfull.service.ts

如下所示：

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

  constructor(private http:Http) { }

  getDashboard(){
    return this.http.get('http://localhost:8080/localservice/getdashboard/HUT17').map((res:Response) => res.json());
  }

}

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    providers: [
        HTTP_PROVIDERS
    ],
    directives: []
})
export class AppComponent {
...
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule, // here
        ...
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [...]
})
export class AppModule { }

然后是我的

app.component.ts

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent],
  providers: [RestfullService]
})

export class AppComponent {
  title = 'app works!';

  public active;

  constructor(private _restfull: RestfullService) { }

  getRest(){
    this._restfull.getDashboard().subscribe(
      data => {this.active = data},
      err => console.error(err),
      () => console.log('done loading foods')
    );
  }
}

我想这就是我所需要的，对吗？我错过了什么吗？它在firebug控制台中向我显示了以下错误：

错误：未捕获（承诺中）：异常：./AppComponent类中的错误 AppComponent_主机-内联模板：0:0原始异常：否 Http的提供者！原始堆栈跟踪： 基本例外@ 抽象提供者错误@ 无提供错误@ ReflectiveInjector_throwOrNull@ReflectiveInjectorgetByKeyDefault@ ReflectiveInjectorgetByKey@ 反射波ectorhttp://localhost:4200/main.bundle.js:56008:16 NgModuleInjectorhttp://localhost:4200/main.bundle.js:40727:40 匿名/\视图\应用组件\主机0.prototype。createInternal@AppComponent.ngfactory.js:18:56 AppViewhttp://localhost:4200/main.bundle.js:56772:16 调试应用程序iewhttp://localhost:4200/main.bundle.js:56985:20 成分actoryhttp://localhost:4200/main.bundle.js:40380:27 应用程序参考_http://localhost:4200/main.bundle.js:27082:23

---

PlatformRef_moduleDoBootstrap/您必须为您的应用程序提供

HTTP_提供程序

，如下所示：

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

  constructor(private http:Http) { }

  getDashboard(){
    return this.http.get('http://localhost:8080/localservice/getdashboard/HUT17').map((res:Response) => res.json());
  }

}

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    providers: [
        HTTP_PROVIDERS
    ],
    directives: []
})
export class AppComponent {
...
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule, // here
        ...
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [...]
})
export class AppModule { }

---

由于RC.5，您应该在根模块中导入

HttpModule

（通常是

app.module.ts

），如下所示：

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

  constructor(private http:Http) { }

  getDashboard(){
    return this.http.get('http://localhost:8080/localservice/getdashboard/HUT17').map((res:Response) => res.json());
  }

}

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    providers: [
        HTTP_PROVIDERS
    ],
    directives: []
})
export class AppComponent {
...
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule, // here
        ...
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [...]
})
export class AppModule { }

---

您在哪里提供

HTTP\u提供程序

或导入

HttpModule

？在我的restfull.service.ts中，我已经提供了HTTP\u提供程序，但尚未导入HttpModule，我应该在哪里导入它？在HTTP\U PROVIDERS正确的同一类中？您只导入

HTTP\U PROVIDERS

，您必须通过

PROVIDERS:[HTTP\U PROVIDERS]

将其提供给根组件。谢谢，它删除了我的错误，但仍然不起作用。我将提出新问题，因为错误不再与HTTP有关