get data from local Json file ionic 3

Question

I start a dummy project in Ionic. I try to get data from a local Json file but I have this error :

I don't understand why there is no provider for HttpClient. For further details, I actually tried to follow this tutorial : https://www.youtube.com/watch?v=vuc4dp0qHSc

How can I fix this error and get the data ?

Versions

Ionic 3.18.0

Angular 5.0.1

app.module.ts

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FirstPage } from '../pages/first/first';
import { CardsDataProvider } from '../providers/cards-data/cards-data';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    FirstPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    FirstPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CardsDataProvider,

  ]
})
export class AppModule {}

cards-data.ts

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

/*
  Generated class for the CardsDataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class CardsDataProvider {

  constructor(public http: HttpClient) {
    console.log('Hello CardsDataProvider Provider');
  }

  getLocalData() {
  this.http.get('../assets/data/cards.json').map(res => res.json()).subscribe(data => 
  {
    console.log(data);
  });  
}
}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirstPage } from '../first/first';
import { CardsDataProvider } from '../../providers/cards-data/cards-data';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public CardsService: CardsDataProvider) {

  }
  openFirstPage() {
    this.navCtrl.push(FirstPage);
  }

  ionViewDidLoad() {
    this.CardsService.getLocalData();
  }
} 

Any help will be appreciated.

Solution

You are following an Ionic2 tutorial while using Ionic3 with Angular5.

For Http to work since Ionic 3.0, you need to include HttpClientModule in your imports in app.module.ts.

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

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    FirstPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule//include here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    FirstPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CardsDataProvider,

  ]
})
export class AppModule {}

Also, in your cards-data.ts,

import {Http} from '@angular/common/http';

@Injectable()
export class CardsDataProvider {

  constructor(public http: HttpClient) { //change here
    console.log('Hello CardsDataProvider Provider');
  }

For further changes to go from Ionic 2 to 3 check here. For changes required to go to Angular 5 check here.

A simpler way is to find a more recent tutorial.

Comments

[Ryley38]

Thank you for your answer. I did not fix the issue. I tried to find a tutorial with ionic 3 but I did not succed at the moment. If you have any recommandation on how to store data locally, i am interrested.

[Suraj Rao]

@Ryley38 updated answer..