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'

Answer 1

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

Answer 2

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.

Answer 3

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