No provider for Http!

Ionic Framework ionic-v3
1

Hi there !

I am trying to use Http provider in order to place marker dynamically from a JSON file on a google map. I’ve followed this tutorial from Joshua Morony :

https://www.youtube.com/watch?v=vuc4dp0qHSc

Unfortunately it appears that is tutorial his deprecated since ionic 3 is here, and I am getting “No provider for Http!” error.

here is my provider (just trying so far to get and log my file ) :

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the HttpProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class HttpProvider {

  constructor(public http: Http) {
    console.log('Hello HttpProvider Provider');
  }

getRemoteData (){
  console.log(this.http.get('../assets/bar.json'));
}

}

The typescript file from where I try to get my JSON file:

...
import { HttpProvider } from '../../providers/http-provider';

@Component({
  selector: 'map-page',
  templateUrl: 'map.html'
})
export class MapPage {
 
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  newsData: any;

 
  constructor(public navCtrl: NavController,public geolocation: Geolocation, public httpProvider: HttpProvider ) {
 
  }
 
  ionViewDidLoad(){
    this.loadMap();
    this.httpProvider.getRemoteData();

  }

...

My module :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import { MyApp } from './app.component';
import { MapPage } from '../pages/map/map';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { MonCompte } from '../pages/monCompte/monCompte';
import { Info } from '../pages/info/info';  
import { HttpProvider } from '../providers/http-provider';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MapPage,
    TabsPage,
    MonCompte,
    Info
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MapPage,
    TabsPage,
    MonCompte,
    Info
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    HttpProvider
  ]
})
export class AppModule {}

I would really appreciate some help to fix my issue :slight_smile:

Thank you ionic community :wink:

2

Hi @tomtom92, you forgot to import the HttpModule inside the app.module.ts.

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

add HttpModule to your imports and you should be good to go.

3

Yeah ! Thank you so much it’s working now :slight_smile: