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 {...}