没有 Http StaticInjectorError 的提供者

Question

我正在尝试从我的 api 中提取数据，并将其填充到我的 ionic 应用程序中，但是当我进入应填充数据的页面时它崩溃了。下面是我的两个 .ts 文件：

 import { Component } from '@angular/core';

import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  data: any;
  loading: any;

  constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: `
        <ion-spinner></ion-spinner>`
    });
    this.getdata();
  }

  getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
      result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
      },
      err => {
        console.error("Error : " + err);
      },
      () => {
        this.loading.dismiss();
        console.log('getData completed');
     }
   );
 }
}

和另一个文件：

 import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  getJsonData() {
    // return Promise.resolve(this.data);

     return this.http.get('url').map(res => res.json());
   }

}

我也尝试过使用 HttpModule，但这是一个致命错误。错误如下图：

 Error: Uncaught (in promise): Error: StaticInjectorError[Http]:
  StaticInjectorError[Http]:
    NullInjectorError: No provider for Http!
Error: StaticInjectorError[Http]:
  StaticInjectorError[Http]:
    NullInjectorError: No provider for Http!
    at _NullInjector.get (http://lndapp.wpi.edu:8100/build/vendor.js:1276:19)

我不确定为什么没有提供程序错误，因为这是通过离子框架创建的提供程序

原文由 Drew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了在您的应用程序中使用 Http，您需要将 HttpModule 添加到您的 app.module.ts：

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ]

编辑

正如下面评论中提到的， HttpModule deprecated ，使用 import { HttpClientModule } from '@angular/common/http' ；确保 HttpClientModule 在您的 imports:[] 数组中

原文由 Sajeetharan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在一个角度项目中（不幸的是）通过 tsconfig.json 使用源代码包含来连接不同的代码集合。我遇到了类似的 StaticInjector 服务错误（例如 RestService 在顶部示例中），我能够通过在 deps 中列出服务依赖项来修复它 --- 在模块中提供受影响服务时的数组，例如：

 import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RestService } from 'mylib/src/rest/rest.service';
...
@NgModule({
  imports: [
    ...
    HttpModule,
    ...
  ],
  providers: [
    {
      provide: RestService,
      useClass: RestService,
      deps: [HttpClient] /* the injected services in the constructor for RestService */
    },
  ]
  ...

原文由 tedw 发布，翻译遵循 CC BY-SA 4.0 许可协议