HTTP plugin is not installed error with ionic

Question

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

The implementation is:

  constructor(private https: HTTP ) {
  }

  this.https.get('http://ionic.io', {}, {})
  .then(data => {
   this.httpData =data;
   console.log(data.status);
   })
   .catch(error => {

     console.log(error.status);

     });

And I get this error:

[20:49:03] console.warn: Native: tried calling HTTP.get, but the HTTP plugin is not installed. [20:49:03] console.warn: Install the HTTP plugin: 'ionic plugin add cordova-plugin-http'

Detector

Can you tell me why you need to use this plugin instead of angular http? – Stretcherbearer

@Stretcherbearer Can't speak about the OP but I'm trying to get rid of CORS error ionicframework.com/docs/faq/… – Dramaturgy

Answer 1

If you do not want to modify the ionic-native plugin like suggested by @alpere or if the solution does not work you can always use the cordova plugin without ionic-native. To do so tell typescript that the http handle exists by adding the following somewhere below your imports:

declare var http;

And then use it like this:

http.get(
  'https://ionic.io/',
  {},
  {},
  response => {
    console.log(response.status);
  },
  response => {
    console.error(response.error);
  },
);

Note that there is no need of this because cordova plugins are defined on a global scope. The downside of using plugins without the ionic-native wrapper is that you loose the nice type annotations, promise callbacks and in some cases you will have to trigger angular change-detection yourself.

Stableman

Answer 2

The Ionic Native HTTP changed the cordova plugin they are using since the old one hasn't been updated for a while. During the change the reference to the plugin has't been updated so it's broken. (See: https://github.com/silkimen/cordova-plugin-advanced-http/issues/8)

You can fix it by changing the old referenced plugin to new one: (After the commit also updating the plugin will fix the issue)

in @ionic-native/plugins/http/index.ts:

change:

pluginRef: 'cordovaHTTP',

to:

pluginRef: 'cordova.plugin.http',

See commit: https://github.com/ionic-team/ionic-native/commit/49ee0d85a304770a9a3bd3e04eb9609e6d565b67

Slut

Answer 3

It may be caused by any of these three issues:

1. The plugin is not installed;
2. You ran the code on a browser (or other limited environment); or
3. The platform is not ready (You called your code before the plugin was loaded).

Immensity

no, these are not the issue. some how ionic object not getting create for the plugin , so its not working. If i am using directly cordova.exec() t=its working fine. – Detector

Answer 4

The master branch of ionic already fixed pluginRef: 'cordova.plugin.http', problem,

Still if the problem persists or you don't want to change the source files try these steps, it worked for me.

1. remove existing builds

   rm -rf node_modules/ platforms/ plugins/ www/
   

2. update ionic native to latest build :

   npm i --save ionic-native@latest
   

   (please check with other plugin dependencies as well if its a problem try isolating packages via virtual environment setup - https://github.com/ekalinin/nodeenv ) :

3. add all your plugins required and http plugin ::

   ionic cordova plugin add cordova-plugin-advanced-http
   

4. Then finally your plugins required and http plugin

   npm install @ionic-native/http
   

Now your upon builds iOS or android should detect all the plugins

Mcwhirter

Answer 5

Ionic3 Cordova SSL pinning example

https://github.com/sijovijayan/SSL-pinning-with-ionic-cordova-example

In this example, you will get an idea about how implement SSL Pinning and How to Generate .cer file

Tother

Answer 6

try to run below command as suggested in error message to install HTTP plugin

ionic plugin add cordova-plugin-http

Schrimsher

Answer 7

I would switch to Angular's HTTP instead of Cordova HTTP. Advantage: Does not require any plugin.

package.json:

   "dependencies": {
        ...
        "@angular/http": "4.1.3",
        ...
   }

app.module.ts:

import { Http, HttpModule } from '@angular/http';

...

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    ...
    HttpModule,
    ...
  ]...

calling .ts-class:

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

...

constructor(... , public http: Http, ...) {
    //Example: .get for a JSON and map it:
    this.http.get(url).map(res => res.json()).subscribe(data => {
        this.data = data;
    });
}

Answer to first Comment:

As you seem to need SSL Pinning and I did not find an easy way in Angular HTTP yet, i saw that your command of adding the cordova plugin differs a little from the one from the documentation:

You wrote:

ionic cordova plugin add cordova-plugin-http

Now the command seems to be:

ionic cordova plugin add cordova-plugin-advanced-http

(https://ionicframework.com/docs/native/http/)

As you can see there, it supports your needs with methods like enableSSLPinning(enable).

Proportional

I need to support SSL pinning and as i feel using angular HTTP we can't support SSL pinning. If is there any way to support ssl pinning using angular http please let me know. – Detector

I just reacted to your request. – Proportional

Answer 8

If you are running the app from your pc, you might get such error. Try using ionicdev

Meloniemelony

This answer is a little thin. Can you say why you think "using ..." will help, and under why you think this will solve the problem outlined in the question? – Dilks

you can't use cordova native plugins from your browsers. even http will not work – Meloniemelony

Comments are not part of this answer. I'm suggesting you expand on this answer to make it more useful to everyone, not just the person asking you to expand on it. – Dilks

Answer 9

Ionic native plugins depend on the device features. So because of this plugins like http, contacts or camera would not work on your browser. An Example of such error is

Native: tried calling HTTP.post, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

So try to get ionic's app for developing app here https://play.google.com/store/apps/details?id=io.ionic.devapp

Meloniemelony

Answer 10

I had the same problem. And I managed to get rid of that error simply by declaring the Angular's HTTP module. In app/app.modules.ts

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

@NgModule({
  imports: [
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
})

Even if I don't use Angular's Module, this solved my problem.

Aniline

Answer 11

Have you ever try to call plugin after the platform ready then check platform?

async checkVersion() {
    const ready = !!await this.platform.ready();
    if (ready && this.platform.is('cordova')) {
        // try to add your code here
    }
}

Maieutic

Answer 12

you have to remove code from ngoninit and add it in ionviewdidenter

ionViewDidEnter(){
//your code here
}

Microelement