Aucun fournisseur pour Http StaticInjectorError

Question

Je suis en train d'extraire les données à partir de mon api, et de le remplir dans mon ionique application, mais il plante quand je rentre dans la page, les données devraient être rempli sur. Ci-dessous sont mes deux .les fichiers 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');
     }
   );
 }
}

et l'autre fichier:

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

}

J'ai essayé d'utiliser le HttpModule ainsi, mais c'est une erreur fatale. L'erreur est que le montre:

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)

Je ne suis pas sûr pourquoi il y est une erreur du fournisseur, comme c'est le fournisseur créé par ioniques cadre

Answer 1

Pour utiliser Http dans votre application, vous devez ajouter le HttpModule à votre 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()
  ]
 

MODIFIER

Comme mentionné dans le commentaire ci-dessous, HttpModule est deprecated maintenant, utilisez import { HttpClientModule } from '@angular/common/http' ; Assurez-vous que HttpClientModule de votre tableau imports:[]

Answer 2

Mise à jour: Angulaire v6+

Pour les Applications converti à partir d'anciennes versions (Angulaire v2 - v5): HttpModule est maintenant obsolète et vous devez le remplacer avec HttpClientModule ou autre, vous obtiendrez l'erreur de trop.

1. Dans votre application.le module.ts remplacer import { HttpModule } from '@angular/http'; avec la nouvelle HttpClientModule import { HttpClientModule} from "@angular/common/http"; Remarque: assurez-vous ensuite de le mettre à jour les modules imports[] tableau par le retrait de l'ancien HttpModule et le remplacer par le nouveau HttpClientModule.
2. Dans l'un de vos services utilisés HttpModule remplacer import { Http } from '@angular/http'; avec la nouvelle HttpClient import { HttpClient } from '@angular/common/http';

3. Mise à jour de la façon dont vous gérer votre réponse Http. Par exemple, Si vous disposez d'un code qui ressemble à ceci

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

L'exemple de code ci-dessus entraînera une erreur. Nous n'avons plus besoin d'analyser la réponse, parce qu'il vient déjà de retour JSON dans la config de l'objet.

L'abonnement rappel des copies les champs de données dans le composant de l'objet de config, qui est liée à des données dans le modèle de composant pour l'affichage.

Pour plus d'informations, veuillez consulter l' - Angulaire HttpClientModule - La Documentation Officielle

Answer 3

Vous devez également importer les HttpClientModule d'angulaires '@angular/common/http' dans votre AppModule principal pour effectuer des requêtes HTTP.

app.module.ts

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

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

Answer 4

Ajoutez ces deux fichiers dans votre app.module.ts

 import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
 

ensuite, déclarez-les au fournisseur.

 providers: [
    Api,
    Items,
    User,
    Camera,
    File,
    FileTransfer];
 

C'est un travail pour moi.

Answer 5

Dans ionic 4.6, j'utilise la technique suivante et ça marche. J'ajoute cette réponse afin que, si quelqu'un est confronté à des problèmes similaires dans la nouvelle application à version ionique, cela puisse les aider.

i) Ouvrez app.module.ts et ajoutez le bloc de code suivant pour importer HttpModule et HttpClientModule.

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

ii) Dans les sections d'importation @NgModule, ajoutez les lignes ci-dessous:

 HttpModule,
HttpClientModule,
 

Donc, dans mon cas, @NgModule, ressemble à ceci:

 @NgModule({
  declarations: [AppComponent ],
  entryComponents: [ ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule, 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
 

C'est ça!