CODEWITHSUNDEEP
cordova-pluginsionic3
Amar1989
Amar1989

Reputation: 512

HTTP plugin is not installed error with ionic

$ 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'

Upvotes: 12

Views: 11274

Answers (12)

Techbeats Software
Techbeats Software

Reputation: 1

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

ionViewDidEnter(){
//your code here
}

Upvotes: 0

123
123

Reputation: 23

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

Upvotes: 2

Serkan KONAKCI
Serkan KONAKCI

Reputation: 1360

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
    }
}

Upvotes: 0

Tony Constanty
Tony Constanty

Reputation: 1

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.

Upvotes: 0

Ebuka
Ebuka

Reputation: 634

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

Upvotes: 0

Ebuka
Ebuka

Reputation: 634

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

Upvotes: 0

sijo vijayan
sijo vijayan

Reputation: 1710

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

Upvotes: 1

Shing
Shing

Reputation: 119

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).

Upvotes: 2

Gary Klasen
Gary Klasen

Reputation: 1070

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).

Upvotes: 0

David
David

Reputation: 7507

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.

Upvotes: 4

Raj
Raj

Reputation: 4010

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

ionic plugin add cordova-plugin-http

Upvotes: 0

alpere
alpere

Reputation: 1119

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

Upvotes: 3

Related Questions