没有Http StaticInjectorError的提供者

Question

我正在尝试从我的api中提取数据,并在我的离子应用程序中填充它,但是当我进入页面时应该填充数据时它会崩溃.以下是我的两个.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)

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

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:[]阵列中

Answer 2

更新:Angular v6 +

对于从旧版本转换的应用程序(Angular v2 - v5):现在不推荐使用HttpModule,您需要将其替换为HttpClientModule,否则您也会收到错误.

1. 在使用新的HttpClientModule import { HttpModule } from '@angular/http';替换import { HttpClientModule} from "@angular/common/http";时imports[] 注意:确保HttpModule通过删除旧模块HttpClientModule并将其替换为新模块来更新模块数组import { Http } from '@angular/http';.
2. 在任何使用HttpModule的服务中都替换 import { HttpClient } from '@angular/common/http';为新的HttpClienthttp.get('people.json').subscribe((res:Response) => this.people = res.json());

3. 更新您处理Http响应的方式.例如 - 如果您的代码看起来像这样

   import { HttpModule } from '@angular/http';

上面的代码示例将导致错误.我们不再需要解析响应,因为它已经在配置对象中作为JSON返回.

订阅回调将数据字段复制到组件的配置对象中,该配置对象在组件模板中进行数据绑定以供显示.

有关更多信息,请参阅 - Angular HttpClientModule - 官方文档

Answer 3

您还需要将HttpClientModuleAngular中的'@angular/common/http'导入到主AppModule中以发出HTTP请求。

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { ServiceService } from '../../../services/service.service';

@NgModule({
   imports: [
       HttpClientModule
   ],
   providers: [
       ServiceService
   ]
})
export class AppModule {...}