get data from local Json file ionic 3 [duplicate] - json

Question

This question already has answers here:
No provider for HttpClient
(25 answers)
Closed 5 years ago.
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.

Answer 1

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.