原始例外：没有 Http 的提供者！在 Angular2 中尝试使用 HTTP.GET 使用 REST 服务

Question

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

这是我所做的，下面首先是我的应用程序结构，我使用 Angular CLI Webpack

创建了这个项目

然后我使用 angular CLI 命令创建了一个服务 class，"ng generate service restfull" 然后我更新了我的 class 所以 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());
  }

}

那么这是我的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 控制台中向我显示了这个错误：

Error: Uncaught (in promise): EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 ORIGINAL EXCEPTION: No provider for Http! ORIGINAL STACKTRACE: BaseException@http://localhost:4200/main.bundle.js:1811:23 AbstractProviderError@http://localhost:4200/main.bundle.js:28260:9 NoProviderError@http://localhost:4200/main.bundle.js:28297:9 ReflectiveInjector_throwOrNull@http://localhost:4200/main.bundle.js:56208:19 ReflectiveInjectorgetByKeyDefault@http://localhost:4200/main.bundle.js:56236:20 ReflectiveInjectorgetByKey@http://localhost:4200/main.bundle.js:56199:20 ReflectiveInjectorhttp://localhost:4200/main.bundle.js:56008:16 NgModuleInjectorhttp://localhost:4200/main.bundle.js:40727:40 anonymous/_View_AppComponent_Host0.prototype.createInternal@AppComponent.ngfactory.js:18:56 AppViewhttp://localhost:4200/main.bundle.js:56772:16 DebugAppViewhttp://localhost:4200/main.bundle.js:56985:20 ComponentFactoryhttp://localhost:4200/main.bundle.js:40380:27 ApplicationRef_http://localhost:4200/main.bundle.js:27082:23 PlatformRef_moduleDoBootstrap/<@http://localhost:4200/main.bundle.js:26940:82 PlatformRefmoduleDoBootstrap@http://localhost:4200/main.bundle.js:26940:13 PlatformRefhttp://localhost:4200/main.bundle.js:26919:21 Zonehttp://localhost:4200/polyfills.bundle.js:3389:20 NgZoneImpl/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:44849:32 Zonehttp://localhost:4200/polyfills.bundle.js:3388:20 Zonehttp://localhost:4200/polyfills.bundle.js:3282:25 scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:3637:53 Zonehttp://localhost:4200/polyfills.bundle.js:3422:24 NgZoneImpl/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:44840:32 Zonehttp://localhost:4200/polyfills.bundle.js:3421:24 Zonehttp://localhost:4200/polyfills.bundle.js:3322:29 drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:3540:26

ERROR CONTEXT: [object Object]

我觉得重点是"no provider for http"对吧？但是我已经把它放在我的 resfull.service.ts class 了，我错过了什么？

Answer 1

您必须为您的申请提供 HTTP_PROVIDERS，如下所示：

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

Answer 2

从 RC.5 开始，您应该像这样在根模块（通常是 app.module.ts）中导入 HttpModule：

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

原始例外：没有 Http 的提供者！在 Angular2 中尝试使用 HTTP.GET 使用 REST 服务

ORIGINAL EXCEPTION: No provider for Http! in Angular2 while trying consume REST service with HTTP.GET

http-get

typescript

angular