ionic 2 error cordova not available - cordova-plugins

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

Answer 3

Using ionic serve disables all the cordova plugins, because it is not running on a device.
Rather use ionic cordova run android
This will start an android emulator that should allow all the cordova plugins to function
I have also come across the second approach, but the syntax then has to be windows['plugins'].googleplus.login(...)

Answer 4

Sometimes using ionic cordova run browser is not the best option, since it takes a long time for it to compile your changes.
In my case, what was causing the issue was the FCM plugin. It cannot run on the browser, if I use ionic serve. Since my code was inside app.component.ts, it was easy for me to get around the problem. I simply used the following line:
if (platform.is('cordova'))
{ this.fcmx.onTokenRefresh().subscribe(token => {
this.pushNoti.storeNewToken(token); }); }
Using platform.is('cordova'), you can prevent the code causing trouble to run on the browser.

Answer 5

Simply Run after attaching android device
ionic cordova run android
make sure you correct google map key