Cordova plugins not work with Ionic

Question

I am building out an Ionic app in Angular and ave never been able to get plugins to work.

As an example, I have tried using the statusbar plugin as described here:

http://ionicframework.com/tutorials/fullscreen-apps/

But it still shows in my app. I tried:

$ cordova plugin add org.apache.cordova.statusbar

and then "cordova prepare", "ionic run ios" and still no luck.

The plugins I get listed when I type

$ cordova plugin list

com.ionic.keyboard 1.0.2 "Keyboard"
org.apache.cordova.console 0.2.10 "Console"
org.apache.cordova.device 0.2.11 "Device"
org.apache.cordova.statusbar 0.1.7 "StatusBar"

I also am using Gulp. I have a folder with all my dev work in, and gulp moves and compiles it into a /dist folder from whence it is served. I'm pretty sure the plugins are moved across perfectly, is there anywhere I should check the references?

Any ideas if there is something you have to do in order to use Cordova plugins with Ionic?

Answer 1

The answer to this was that I had to add

<script src="cordova.js"></script>

to my page, just above my scripts.

Please be aware this file doesnt exist during development, it's injected at runtime... which is why I could solve it. Hope this helps someone!

Answer 2

Additional solution if including cordova.js doesn't resolve the problem

I have had the same issue, but cordova.js was already included in my index.html . window.plugins always has been undefined. Then I noticed that there is a cordova_plugins.js file inside the platforms/ios/www folder.

Here's what I did:

1. $ cordova plugin add cordova-plugin-flashlight
2. $ cordova prepare
3. added <script src="cordova_plugins.js"></script> right after cordova.js inside index.html

After that I could access the window.plugins variable.

HINT: take a look into your cordova_plugins.js and be aware that some plugins are attached to cordova.plugins (eg Keyboard Plugin, see below) others are attached to window.plugins (eg Flashlight)

For reference - my cordova_plugins.js file looks like this

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/cordova-plugin-console/www/logger.js",
        "id": "cordova-plugin-console.logger",
        "clobbers": [
            "cordova.logger"
        ]
    },
    {
        "file": "plugins/cordova-plugin-console/www/console-via-logger.js",
        "id": "cordova-plugin-console.console",
        "clobbers": [
            "console"
        ]
    },
    {
        "file": "plugins/cordova-plugin-device/www/device.js",
        "id": "cordova-plugin-device.device",
        "clobbers": [
            "device"
        ]
    },
    {
        "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
        "id": "cordova-plugin-splashscreen.SplashScreen",
        "clobbers": [
            "navigator.splashscreen"
        ]
    },
    {
        "file": "plugins/cordova-plugin-statusbar/www/statusbar.js",
        "id": "cordova-plugin-statusbar.statusbar",
        "clobbers": [
            "window.StatusBar"
        ]
    },
    {
        "file": "plugins/ionic-plugin-keyboard/www/ios/keyboard.js",
        "id": "ionic-plugin-keyboard.keyboard",
        "clobbers": [
            "cordova.plugins.Keyboard"
        ],
        "runs": true
    },
    {
        "file": "plugins/cordova-plugin-flashlight/www/Flashlight.js",
        "id": "cordova-plugin-flashlight.Flashlight",
        "clobbers": [
            "window.plugins.flashlight"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-console": "1.0.1",
    "cordova-plugin-device": "1.0.1",
    "cordova-plugin-splashscreen": "2.1.0",
    "cordova-plugin-statusbar": "1.0.1",
    "cordova-plugin-whitelist": "1.0.0",
    "ionic-plugin-keyboard": "1.0.7",
    "cordova-plugin-flashlight": "3.0.0"
}
// BOTTOM OF METADATA
});

Answer 3

I tested this on Android and iPhone simulator and works correctly. Try this code:

angular.module('starter', [
    'ionic',
    'starter.controllers',
    ... more modules here
])
.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.hide();
        }
    });
})
.... more code

EDIT:

$ cordova plugin add org.apache.cordova.statusbar
$ ionic build ios
$ ionic run ios 

EDIT II: (Try with a fresh Project and iPhone Simulator)

$ ionic start testStatusBar tabs
$ cd testStatusBar/
$ cordova plugin add org.apache.cordova.statusbar
$ vim www/js/app.js


Edit this:
if(window.StatusBar) {
  // org.apache.cordova.statusbar required
  // StatusBar.styleDefault();
  StatusBar.hide();
}

$ vim www/index.html

add class="fullscreen" to the <body> element


$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios