HTTP plugin is not installed error with ionic - cordova-plugins

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

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

Answer 3

It may be caused by any of these three issues:
The plugin is not installed;
You ran the code on a browser (or other limited environment); or
The platform is not ready (You called your code before the plugin was loaded).

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.
remove existing builds
rm -rf node_modules/ platforms/ plugins/ www/
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 ) :
add all your plugins required and http plugin ::
ionic cordova plugin add cordova-plugin-advanced-http
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 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

Answer 6

try to run below command as suggested in error message to install HTTP plugin
ionic plugin add cordova-plugin-http

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

Answer 8

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

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

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.

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

Answer 12

you have to remove code from ngoninit and add it in ionviewdidenter
ionViewDidEnter(){
//your code here
}