title: get data from local Json file ionic 3
body: <p>I start a dummy project in Ionic. I try to get data from a local Json file but I have this error :
  <a href="https://i.stack.imgur.com/49WL7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/49WL7.png" alt="enter image description here"></a></p>
  
  <p>I don't understand why there is no provider for HttpClient.
  For further details, I actually tried to follow this tutorial : <a href="https://www.youtube.com/watch?v=vuc4dp0qHSc" rel="nofollow noreferrer">https://www.youtube.com/watch?v=vuc4dp0qHSc</a></p>
  
  <p>How can I fix this error and get the data ?</p>
  
  <p><strong>Versions</strong></p>
  
  <p>Ionic 3.18.0</p>
  
  <p>Angular 5.0.1</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p><strong>cards-data.ts</strong></p>
  
  <pre><code>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 =&gt; res.json()).subscribe(data =&gt; 
    {
      console.log(data);
    });  
  }
  }
  </code></pre>
  
  <p><strong>home.ts</strong></p>
  
  <pre><code>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();
    }
  } 
  </code></pre>
  
  <p>Any help will be appreciated.</p>