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.