Kein Anbieter für Http StaticInjectorError

Ich versuche, die Daten von meiner API abzurufen und in meine ionische App einzufügen, aber sie stürzt ab, wenn ich die Seite betrete, auf der die Daten ausgefüllt werden sollen. Unten sind meine zwei .ts-Dateien:

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

und die andere Datei:

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

}

Ich habe auch versucht, das HttpModule zu verwenden, aber es ist ein schwerwiegender Fehler. Der Fehler ist wie folgt:

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)

Ich bin mir nicht sicher, warum es keinen Anbieterfehler gibt, da dies der Anbieter ist, der durch das ionische Framework erstellt wurde

Um Http in Ihrer App zu verwenden, müssen Sie das HttpModule zu Ihrer app.module.ts hinzufügen:

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

BEARBEITEN

Wie im Kommentar unten erwähnt, HttpModuleist deprecatedjetzt verwenden import { HttpClientModule } from '@angular/common/http'; Stellen Sie sicher, HttpClientModulein Ihrem imports:[]Array

Update: Angular v6 +

Für Apps, die von älteren Versionen (Angular v2 - v5) konvertiert wurden: HttpModule ist jetzt veraltet und Sie müssen es durch HttpClientModule ersetzen, sonst wird auch der Fehler angezeigt.

1. In Ihrer app.module.ts durch import { HttpModule } from '@angular/http';das neue HttpClientModule ersetzen import { HttpClientModule} from "@angular/common/http"; Hinweis: Aktualisieren Sie anschließend das Modul- imports[]Array, indem Sie das alte entfernen HttpModuleund durch das neue ersetzen HttpClientModule.
2. In allen Ihren Diensten, die HttpModule verwendet haben, ersetzen Sie diese import { Http } from '@angular/http';durch den neuen HttpClientimport { HttpClient } from '@angular/common/http';

3. Aktualisieren Sie, wie Sie mit Ihrer HTTP-Antwort umgehen. Zum Beispiel - Wenn Sie Code haben, der so aussieht

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

Das obige Codebeispiel führt zu einem Fehler. Die Antwort muss nicht mehr analysiert werden, da sie im Konfigurationsobjekt bereits als JSON zurückgegeben wird.

Der Abonnement-Rückruf kopiert die Datenfelder in das Konfigurationsobjekt der Komponente, das in der Komponentenvorlage zur Anzeige datengebunden ist.

Weitere Informationen finden Sie in der offiziellen Dokumentation - Angular HttpClientModule

Sie müssten auch das HttpClientModulevon Angular '@angular/common/http'in Ihr Haupt-AppModule importieren, um HTTP-Anforderungen zu stellen.

app.module.ts

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

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

Fügen Sie diese beiden Dateien in Ihre app.module.ts

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

Danach deklarieren Sie diese im Anbieter ..

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

Das ist Arbeit für mich.

Ich bin in einem Winkelprojekt, das (leider) die Einbeziehung tsconfig.jsonvon Quellcode über verwendet , um verschiedene Codesammlungen zu verbinden. Ich habe einen ähnlichen StaticInjectorFehler für einen Dienst RestServicefestgestellt (z. B. im oberen Beispiel) und konnte ihn beheben, indem ich die Dienstabhängigkeiten im depsArray aufgelistet habe, als ich den betroffenen Dienst im Modul bereitgestellt habe, zum Beispiel:

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

In ionic 4.6 verwende ich die folgende Technik und es funktioniert. Ich füge diese Antwort hinzu, damit jemand, der in der neueren App für ionische Versionen mit ähnlichen Problemen konfrontiert ist, diese möglicherweise unterstützt.

i) Öffnen Sie app.module.ts und fügen Sie den folgenden Codeblock hinzu, um HttpModule und HttpClientModule zu importieren

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

ii) Fügen Sie in den @ NGModule-Importabschnitten die folgenden Zeilen hinzu:

HttpModule,
HttpClientModule,

In meinem Fall sieht @NgModule also so aus:

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

Das ist es!

Ich habe ungefähr eine Stunde lang versucht, das Problem zu beheben, und nur versucht, den Server neu zu starten . Nur um zu sehen, ist das Problem behoben.

Wenn Sie Änderungen am APP-Modul vornehmen und das Problem weiterhin besteht, stoppen Sie den Server und versuchen Sie erneut, den Befehl serve auszuführen.

Verwendung von ionischem 4 mit Winkel 7