angular - cannot - No hay proveedor de Http StaticInjectorError

cannot find module ''@ angular common http

Question

Estoy intentando extraer los datos de mi api y rellenarlos en mi aplicación iónica, pero se bloquea cuando ingreso a la página en la que se deben completar los datos. Abajo están mis dos archivos .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'');
     }
   );
 }
}

y el otro archivo:

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

}

He intentado usar el HttpModule también, pero es un error fatal. El error es como se muestra:

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)

No estoy seguro de por qué no hay un error de proveedor, ya que este es el proveedor creado a través del marco iónico

Answer 1

Actualización: Angular v6 +

Para aplicaciones convertidas de versiones anteriores (Angular v2 - v5): HttpModule ahora está en desuso y debe reemplazarlo con HttpClientModule o, de lo contrario, también obtendrá el error.

1. En tu app.module.ts reemplaza la import { HttpModule } from ''@angular/http''; con el nuevo HttpClientModule import { HttpClientModule} from "@angular/common/http"; Nota: Asegúrese de actualizar la matriz de las imports[] módulos imports[] eliminando el antiguo HttpModule y reemplazándolo con el nuevo HttpClientModule .
2. En cualquiera de sus servicios que usaron HttpModule reemplace import { Http } from ''@angular/http''; con la nueva import { HttpClient } from ''@angular/common/http''; HttpClient import { HttpClient } from ''@angular/common/http'';

3. Actualiza cómo manejas tu respuesta Http. Por ejemplo, si tiene un código que se ve así

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

El ejemplo de código anterior dará lugar a un error. Ya no necesitamos analizar la respuesta, porque ya vuelve a aparecer como JSON en el objeto de configuración.

La devolución de llamada de suscripción copia los campos de datos en el objeto de configuración del componente, que está enlazado a los datos en la plantilla del componente para su visualización.

Para obtener más información, consulte el - Módulo HttpClient Angular - Documentación oficial

Answer 2

Agregue estos dos archivos en su app.module.ts

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

después de eso declarar estos en el proveedor ..

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

Esto es trabajo para mí.

Answer 3

Para utilizar Http en su aplicación, deberá agregar el HttpModule a su 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()
  ]

EDITAR

Como se menciona en el comentario a continuación, HttpModule está en deprecated ahora, use import { HttpClientModule } from ''@angular/common/http'' ; Asegúrese de que HttpClientModule en sus imports:[] array

Answer 4

También necesitaría importar HttpClientModule desde Angular ''@angular/common/http'' en su AppModule principal para realizar solicitudes HTTP.

app.module.ts

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

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