angular - Http için sağlayıcı yok StaticInjectorError

Verileri API'imden çekmeye ve Ionic uygulamama doldurmaya çalışıyorum, ancak verilerin doldurulması gereken sayfaya girdiğimde uygulama çöküyor. Aşağıda iki .ts dosyam bulunmakta:

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');
     }
   );
 }
}

ve diğer dosya:

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'u kullanmayı da denedim, ancak bu ölümcül bir hata. Hata şöyle gösteriliyor:

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)

Neden 'no provider' hatası olduğunu bilmiyorum, çünkü bu, Ionic framework ile oluşturulmuş sağlayıcı.

Cevap #1

Uygulamanızda Http kullanabilmek için app.module.ts dosyanıza HttpModule'u eklemeniz gerekecek:

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()
  ]

DÜZENLE

Aşağıdaki yorumda belirtildiği gibi, HttpModule artık kullanımdan kaldırılmıştır, bunun yerine import { HttpClientModule } from '@angular/common/http' kullanın; HttpClientModule'ün imports:[] dizinizde olduğundan emin olun

Cevap #2

Güncelleme: Angular v6+

Eski sürümlerden (Angular v2 - v5) dönüştürülen uygulamalar için: HttpModule artık kullanımdan kaldırıldı ve HttpClientModule ile değiştirmeniz gerekiyor, aksi takdirde hata alırsınız.

  1. Sizin app.module.ts dosyanızda import { HttpModule } from '@angular/http'; ifadesini yeni HttpClientModule ile değiştirin import { HttpClientModule} from "@angular/common/http"; Not: Daha sonra modüllerin imports[] dizisini güncelleyerek eski HttpModule ifadesini kaldırıp yerine yeni HttpClientModule ifadesini eklediğinizden emin olun.
  2. HttpModule kullanan herhangi bir servisinizde import { Http } from '@angular/http'; ifadesini, yeni HttpClient ile değiştirin import { HttpClient } from '@angular/common/http';

  3. Http yanıtınızı nasıl yönettiğinizi güncelleyin. Örneğin - Eğer şöyle görünen bir kodunuz varsa

    http.get('people.json').subscribe((res:Response) => this.people = res.json());

Yukarıdaki kod örneği bir hata ile sonuçlanacaktır. Artık yanıtı ayrıştırmamıza gerek yok, çünkü yanıt zaten config nesnesi içinde JSON olarak geliyor.

Abonelik geri araması, veri alanlarını bileşenin şablonunda görüntüleme için veri bağlı olan bileşen yapılandırma nesnesine kopyalar.

Daha fazla bilgi için lütfen - Angular HttpClientModule - Resmî Belgeler'e bakınız

İlgili makaleler