web-dev-qa-db-fra.com

Aucun fournisseur pour Http StaticInjectorError

J'essaie d'extraire les données de mon API et de les renseigner dans mon application ionique, mais il se bloque lorsque j'entre dans la page sur laquelle les données doivent être renseignées. Voici mes deux 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 aussi essayé d'utiliser HttpModule, mais c'est une erreur fatale. L'erreur est comme 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 sais pas pourquoi il n'y a pas d'erreur de fournisseur, car il s'agit d'un fournisseur créé via un cadre ionique.

angularionic-framework
31
Drew

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,HttpModuleestdeprecatedmaintenant, utilisezimport { HttpClientModule } from '@angular/common/http'; Assurez-vous queHttpClientModuledans votreimports:[]array

81
Sajeetharan

Vous devez également importer la variable HttpClientModule de Angular '@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 {...}
1
Gunjan Kumar

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.

0
Rajiv Pandey

Je suis sur un projet angulaire qui utilise (malheureusement) l'inclusion de code source via tsconfig.json pour connecter différentes collections de code. Je suis tombé sur une erreur similaire StaticInjector pour un service (par exemple, RestService dans l'exemple ci-dessus) et j'ai pu y remédier en répertoriant les dépendances de service dans le tableau deps lorsque service dans le module, par exemple:

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 */
    },
  ]
  ...
0
tedw

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 tout!

0
Phan Hero