Cannot access cordova plugins from JavaScript

ionic-v1
1

Hello!
I want to access a plugin from my javascript (of course i’m on device, not in browser).
For example, let it be [Ionic Keyboard Plugin for Cordova][1] (i cannot access ANY plugin, not only Keyboard).
I have made everything up to this tutorial Chat tutorial using beta3 (epic).
All i want is to access the plugin from JS code, but with no luck.
cordova and window.cordova objects are defined but cordova.plugins seems to be empty.

I have added <script src="cordova.js"></script> to my index.html file.
I have added <feature name="Keyboard"><param name="ios-package" value="IonicKeyboard" onload="true" /></feature> to config.xml.

This is my JS code to check plugins:

.controller('InitialScreenCtrl', ['$scope', function($scope) {
$scope.checkPlugins = function() {
  $scope.arguments = {
    ok: true,
    'window.cordova': window.cordova,
    'cordova': cordova,
    'cordova.plugins': typeof cordova.plugins
  };
};

}])

And here is the result:

Thanks for any help!
[1]: https://github.com/driftyco/ionic-plugins-keyboard

2

You should use the plugin after the platform is ready, try using $ionicPlatform.ready() to fire the events just like the initial projects from Ionic.

angular.module( 'starter', ['ionic','starter.controllers','starter.services'] )
.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
       // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
})
3

Thanks for response @felipew!
I have tried this solution already but with no result. And I call my function checkPlugins with ng-click (usually much after all other actions like platform ready and so).

4

I have found that my js code affects cordova plugins loading process somehow. When i use super simple module like @felipew suggested above everything is ok, but when i use the code of my project plugins become broken. So, my new sub-question is how to find the place where my code affects cordova plugins loading?

5

I guess there is a race condition occurring between controllers being loaded and cordova plugins. I’m having the same issue. I tried bootstrapping the document but was no good to me. Try this solution. Let me know if you found a solution for this.

6

I’m experiencing the same problem. There is no cordova object on the window, so I’m not able to access any plugin, even at after $ionicPlatform.ready.

@felipew, did you find a solution in the end?

7

Yes!

I changed my html, and removed the ng-app tag, an then just before the closing HTML tag I added the following:

window.ionic.Platform.ready(function() {
    angular.bootstrap(document, ['MY_APP_NAME']);
});
2 Likes
8

Just to confirm, the “cordova” object should NOT be available in the web browser (e.g. ionic serve --lab); but rather the emulator?

9

correct, cordova will not be available in the browser, only on device. In your application code always check to see if the cordova object or the global plugin object is defined before using a plugin so you wont run into issues when developing in a browser.

1 Like
10

This saved me thanks