Cordova plugins are not working in my Ionic project


#1

Hello ppl, after searching a lot on forums for solutions on this issue without success, I´m then asking here in hope for a more specific solution.

I have an Ionic + Cordova project, where I need access to device´s resources like basic device information, GPS, notifications (dialogs), etc.

My dev environment is set up on a Windows pc with:
Cordova 3.5.0-0.2.7
Ionic v1.1.13

To make things easy, I am using ngCordova to wrap the plugins “AngularJs-ly”.

I have installed and re-installed the plugins by running both:

cordova plugin add org.apache.cordova.<plugin name> 
ionic plugin add org.apache.cordova.<plugin name> 

And they all works fine.
After doing so, the plugins are shown correctly on the list (ionic / cordova plugin list).
Once I build the project with ionic build android (or cordova build android), I can see that all the plugins are correctly listed on the config.xml file located in res/xml/config.xml.

<?xml version='1.0' encoding='utf-8'?>
<widget version="0.9.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <feature name="Device">
        <param name="android-package" value="org.apache.cordova.device.Device" />
        <param name="id" value="org.apache.cordova.device" />
    </feature>
    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.dialogs.Notification" />
        <param name="id" value="org.apache.cordova.dialogs" />
    </feature>

My /plugins/android.json file:

{
    "prepare_queue": {
        "installed": [],
        "uninstalled": []
    },
    "config_munge": {
        "files": {
            "res/xml/config.xml": {
                "parents": {
                    "/*": [
                        {
                            "xml": "<feature name=\"Notification\"><param name=\"android-package\" value=\"org.apache.cordova.dialogs.Notification\" /></feature>",
                            "count": 1
                        },
                        {
                            "xml": "<feature name=\"Device\"><param name=\"android-package\" value=\"org.apache.cordova.device.Device\" /></feature>",
                            "count": 1
                        }
                    ]
                }
            }
        }
    },
    "installed_plugins": {
        "org.apache.cordova.dialogs": {
            "PACKAGE_NAME": "com.sevencomm.sevenmobb.visit"
        },
        "org.apache.cordova.device": {
            "PACKAGE_NAME": "com.sevencomm.sevenmobb.visit"
        }
    },
    "dependent_plugins": {}
}

My index.html file:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="bower_components/ionic/css/ionic.css" rel="stylesheet">
    <link href="common_components/css/app.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    
    <!-- ionic/angularjs js -->
    <script src="bower_components/ionic/js/ionic.bundle.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

	<!-- cordova script (this will be a 404 during development) -->
	<script src="bower_components/ng-cordova/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    
    <!-- your app's js -->
    <script src="app.js"></script>
    
   <body ng-controller="myApp">
  	<ion-nav-bar animation="nav-title-slide-ios7"></ion-nav-bar>
  	<ion-nav-view animation="slide-left-right" name="main"></ion-nav-view>
  </body>
  
</html>

My app.js file:

var app = angular.module('myApp', ['ionic', 'ngCordova']

app.run(function($ionicPlatform, $cordovaDevice, $cordovaDialogs) {
  $ionicPlatform.ready(function() {
	if(window.cordova && window.cordova.plugins.Keyboard) {
	  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
	}
	if(window.StatusBar) {
	  StatusBar.styleDefault();
	}
	
    // unecessary "if", I know, just testing
    if(ionic.Platform.isReady){
      console.log("DEBUGGING: Cordova Device " + $cordovaDevice.getCordova());
      $cordovaDialogs.alert("Ionic is ready");
    }
});
});

Anyway, I then run the app on a proper device (ionic run android), everything goes smoothly, but once the app starts I get the error:

Uncaught ReferenceError: device is not defined at file:///android_asset/www/app/bower_components/ng-cordova/ng-cordova.js:421

All the plugins I use receive some sort of error like this one. The same happens, for example, with the Notification plugin. If I remove the line

 console.log("DEBUGGING: Cordova Device " + $cordovaDevice.getCordova());

from the above code, I get the error:

Uncaught TypeError: Cannot read property ‘alert’ of undefined at file:///android_asset/www/app/bower_components/ng-cordova/ng-cordova.js:528

I have tried:

  • removing the plugins, deleting the platforms/android folder, adding the plugins again, adding the platform (ionic platform add android) and re-building/re-running the project
  • deleting the android.json file, re-creating and then re-building the app
  • running cordova prepare android (ionic prepare android) and then re-building the app
  • manually including the plugins in the root config.xml file and re-building the app
  • running cordova plugin save --experimental then re-building the app
  • changing the config.xml header to look like

xmlns:gap=“http://cordova.apache.org/ns/1.0”>

instead of

xmlns:cdv=“http://cordova.apache.org/ns/1.0”>

and then adding the plugins as

< gap:plugin name=“org.cordova.plugin.device” />

and re-building the app.

None of the solutions above worked. I have tried everything without ngCordova too, without success.

Please, can you guys help me with this problem? I have tried every possible solution I found around the internet.
I´ve searched the forum and found others with the problem that looks just like mine.

Maybe is something with cordova 3.5? or my environment is broken (strange, cause it is working fine for everything else). Maybe something I haven´t tried yet.

TYVM in advance.


#2

Adding one more information. My project name starts with a capital letter.
I saw some post where ppl solved this problem by changing the project name…


#3

I tried to update cordova to version 3.6.0, then added the plugins again, re-built the app and the error still occurs.

I´m now trying to downgrade cordova to version 3.3.0-rc.1

Can I have any help, please.


#4

Hey there!

So changing the config.xml isn’t really recommended, as it could create more problems then solve them.

Soo just to make sure we’re covering all the bases, you should have cordov version 3.5 and ionic cli version 1.2.0.


#5

Hi @mhartington, thanks for answering.

My Ionic version was out-dated, so I updated to 1.2.0 .
Then I upgraded cordova to version 3.5.0-0.2.7 by removing the previous one and re-installing pointing to the last 3.5 release.

What I did after that was:

  • deleted the platform/android folder
  • removed all the plugins (ionic plugin rm org.apache.cordova.plugin)
  • deleted plugins/android.json file
  • added the plugins again (ionic plugin add org.apache.cordova.plugin)
  • added android platform to the project (received the log msg: Installing “org.apache.cordova.plugin” for android)
  • built and run the project

Using Eclipse´s LogCat I keep receiving the same error: Uncaught TypeError: Cannot read property “alert” of undefined at file:///…

Just another piece of information: I have tried to run the app on an iPhone emulator, in a totally different machine (no virtual machines or similar) and the plugins don´t work in that either.

I´ll create a new blank app with cordova 3.5, use my www folder and re-build the app with the plugins to see what´s the result. I´ll be back soon.

Thanks again for the help.


#6

@mhartington, I found the error.

The problem was that my project entry structure was

www/
    app/
        index.html
        app.js
        app_components/

For some reason, cordova / angular does not work well with that. I than changed the structure to

www/
    index.html
    app.js
    app/
        app_components/

and the plugins started working…

I don´t know if this is working as planned or if it is a bug.
Anyway, my problem is, at first sight, solved.

Thanks a lot.