Problems with HTTP in ionic 3

Question

I am making an app with ionic 3 and I want to use the HTTP module. I used the official documentation of the Ionic framework.

Link: https://ionicframework.com/docs/native/http/

I did these commands:

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http

So far so good. Then I added this module into my app.module.ts file and the code 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 { ResultstatsPage } from '../pages/resultstats/resultstats';
import { HTTP } from '@ionic-native/http';

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

I have made an function with the HTTP like this:

getStats(){
   this.http.get(this.url, {}, this.apikey)
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });
  }

When I run the app with ionic serve I get a error (see screenshot)

I have tried several solutions but it didn't solve the issue. Can someone point me in the right direction?

Yeah I saw that also on the Internet. When I work with a framework I always used the 'official way' let me try it out! — Fearcoder
– Fearcoder, Commented Apr 24, 2018 at 13:50

tatsu · Accepted Answer · 2018-04-24 14:39:37Z

according to this : https://ionicframework.com/docs/native/http/

you don't import import { HTTP } from '@ionic-native/http'; in app.module.ts but in the component (or rather service) which will make the api call.

in angular the equivalent would be (3 different files) (in app.module.ts )

 import {HttpClientModule} from '@angular/common/http';
 ...
 providers: [
    HttpClientModule,
    ...

in api.service.ts :

import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse} from '@angular/common/http';
...
getItems(): any{
  const apiURL = `${this.API_URL}/items`;
  this.items =
   this._http
    .get(apiURL)
    .catch(this.handleError);
  return this.items;
}

handleError(error: HttpErrorResponse) {
  console.log('an http get error happened.');
  console.error(error);
  let errorMessage;
  if (error.error instanceof Error) {
    errorMessage = `An error occurred: ${error.error.message}`;
  } else {
    errorMessage = `Server returned code: ${error.status}, error message is: ${error.message}`;
  }
  console.error(errorMessage);
  return errorMessage;
}

and in my.component.that.calls.api :

this.apiservice.getItems().subscribe(returnData => {
  if(returnData !== null && returnData !== undefined) if(returnData .length > 1){
    // do something with returnData 
    console.log(returnData);
  }
}, (error) => console.log(error), () => {});

Lia · Accepted Answer · 2018-04-24 13:47:18Z

1

try import HttpModule:

imports: [
    BrowserModule,   
    IonicModule.forRoot(MyApp),
    HttpModule    
  ],

answered Apr 24, 2018 at 13:47

Lia

12k3 gold badges36 silver badges53 bronze badges

Collectives™ on Stack Overflow

Problems with HTTP in ionic 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related