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?

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

Solution 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 (e.g. Keyboard Plugin, see below) others are attached to window.plugins (e.g. 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
});

Solution 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

Comments

[engincancan]

Can you give more information about steps you follow. It meant to work with cordova. I am guessing your enviroment is wrong or you missing something so little. Is it work without adding plugin. Thnx

[Ben Taliadoros]

I have added a bit more info, is there any other info you could use to help diagnose?

[Ben Taliadoros]

Unfortunately this doesn't work for me. have you got any other references to the plugins in your app?

[Ben Taliadoros]

With some playing, and i'm not sure what was different, the status bar now is white text. the green battery is still visible against the white background, so this is not ideal, is this what you get?

[manzapanza]

After the splash screen, when the app is started, the status bar is completely hidden (no time, no battery etc etc)

[Ben Taliadoros]

No it's still just white text. I am seeing someone later who has used a few so I may be able to shed light then. For now all i think is I've done something wrong, but don't know what

[Joel.Cogley]

This issue has been plaguing me for that last week. Thank you!