Difficulties in calling a method for an http request - http

Question

I have an error message when I try to make an HTTP request:
"Cannot read property 'get' of undefined"
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "#angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz, public http: HttpClient) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}
import {HttpClient} from "#angular/common/http";
export class ApiGdz {
public http: HttpClient;
constructor() {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
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 {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
ApiGdz,
]
})
export class AppModule {
}
The problem may be that 'HttpClient' must come from the constructor ... In this case how to instantiate the 'http' object in 'DashboardPage' with parameters?
Thanks for your help

Answer 1

Let me start by saying I am not an Ionic developer so there may well be something specific required for that environment that I am unaware of, I can only speak to the Angular portion of your code.
Given that, I have to make the assumption from what you have posted in your question above that in spite of how it appears, in reality you posted code from 3 DIFFERENT files. My assumption is that file #1 is the component, probably has a name like dashboard.component.ts and looks like the first part of what you posted:
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "#angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz, public http: HttpClient) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}
Then there is a separate service file (which appears to be imported in the component above), is called apiGdz.service.ts, and looks like this:
import {HttpClient} from "#angular/common/http";
export class ApiGdz {
public http: HttpClient;
constructor() {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
And finally you also included your base module file, probably called something like app.module.ts, which looks like this:
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 {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
ApiGdz,
]
})
export class AppModule {
}
If all that is correct, then I would suggest a minor change to both the component and the service.
First the service. One of the benefits of using services in Angular is that they can hide details from the component such as the fact that you are getting real data from the back-end server via http. Therefore your service would look something like this:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({ providedIn: 'root' })
export class ApiGdz {
constructor(private http: HttpClient) {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
Now your component can be changed to know nothing about http, just rely on the injected service to handle those details. It would now look something like this:
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
// import {HttpClient} from "#angular/common/http"; // <-- DELETE THIS LINE
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}