ionic 2 error cordova not available

Question

I am trying to use the cordova GooglePlus plugin in a new ionic 2 project (latest ionic2 version) but I always run into errors regarding cordova. The plugin is properly installed and shows up in the plugin folder.

One approach I tried is this:

import { GooglePlus } from "ionic-native"; 

and then

GooglePlus.login().then(...) 

The login method executes but always throws an error saying "cordova_not_available"

I want to test the app with ionic serve on my windows system first before deploying it to my android phone. How can I make cordova available in the localhost server? From searching I understand that cordova.js is generated and always included in the deploy package for the device.

Another approach I tried is using

window.plugins.googleplus.login(...) 

But this approach does not go through the typescript compiler who does not know anything about a plugins property on the windows object.

How can I fix this?

Answer 1

If you want the plugin to work for the browser you should add platform browser and run it:

ionic cordova platform add browser 

and run it:

ionic cordova run browser 

instead of ionic serve.

Answer 2

This error usually occurs when you're running the app in chrome using ionic serve which is normal as in the browser cordova native components are not there but also occur on emulator and devices when an ionic native plugin that you're using was nod added, even if you have added the ionic plugin for it.

For instance if you are using native Toast

then you need to add proper ionic dependencies:

ionic plugin add cordova-plugin-x-toast --save 

but you also need to add cordova dependencies:

cordova plugin add cordova-plugin-x-toast --save 

If you forget to add the later cordova plugin you'll get an error like:

Runtime Error Uncaught(in promise): cordova_not_available 

Which can be tricky to find the cause.

Once you have added ionic and cordova dependencies you should be able to use it.

Make sure you import it:

import { Toast } from 'ionic-native'; 

inject Platform in constructor:

constructor(public navCtrl: NavController, private platform: Platform) {... 

then use the native item:

this.platform.ready().then(() =>       Toast.show("Successfull", '5000', 'center')         .subscribe(         toast => {           console.log(toast);         }       ));