[solved] ngCordova - uncaught object error


#1

I did the basics of creating a new app and then adding ngCordova. With just the basic code, I get an Uncaught Object error at localhost:8100/lib/ionic/js/ionic.bundle.js:12831.

Steps I followed:

  • Created ionic app, and that works.
  • Downloaded a custom build of ng-cordova that included only ‘dialogs’.
  • Copied ng-cordova.js to myApp/www/lib
  • added a script tag to my html just before where cordova.js was added <script src="lib/ng-cordova.js"></script>
  • added ngCordova to the app’s modules angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers'])
  • added the dialogs plugin with cordova plugin add org.apache.cordova.dialogs

I started with a fresh app in a new directory and have only done the steps above. Any idea why I’m getting this Uncaught Object error? Are there any other steps that I need to follow?
I’m running it on a Mac, OSX 10.9.3. Cordova version: 3.5.0-0.2.4

I came across this post https://github.com/phonegap/phonegap-cli/commit/d8d54ece21300dad63015779b6c5c629510c17d6. Does this have anything to do with the issue?


I'm having some trouble with a plugin I installed
#2

Everything seems like it’s set up properly from how you describe it. Can you post a link to a github project? I can take a look more closely at the way the code is set up there.

Are things working at least? Or are things completely broken?


#3

The git project for reference is here: https://github.com/sathishvj/myApp


#4

I’m getting a similar error. I was just trying to add angular.module('myApp', ['ngCordova']) to my app like so var app = angular.module('unf', ['ionic', 'ngCordova']). Blows everything up. Are more files needed other than ng-cordova.js? I’m using a custom build off the site. Not a git clone of the project.


#5

might also be because I’m testing the app in the browser. But I’m not getting anything in ios emulator, but I wasn’t checking my changes in the ios emulator so I’m not %100 sure it’s related to ngCordova.


#6

I think I figured out the issue. Either the documentation is misleading or the custom build has errors. Open ng-cordova.js and you will see that there is no module defined for ngCordova. Only part of the plugin code is downloaded without the module definition.

Workaround/solution: I took the raw file for ng-cordova.js from here https://raw.githubusercontent.com/driftyco/ng-cordova/master/dist/ng-cordova.js, and am including that in the project now. I haven’t tried out the plugins yet to see if it works fully, but at least the error is not thrown on the basic app.


#7

Followed the rest of the steps to try out cordovaDialogs using the full ng-cordova.js and now it works. I’ll raise an issue somewhere so that the custom build is fixed.

Btw, @mhartington, none of these ngCordova plugins will work within the browser? Do all of them only work in the emulator/device?


#8

I meant that are they working on a device, not the browser, sorry for not clarifying :smile:

So the way the custom builds are setup is that each plugin added the list gets setup as it’s own angular module, with different names for each plugin.

We can add this explanation to the documentation to avoid any confusion


#9

But what about the core module? The one that defines ngCordova? Where do you download that from? I think it should be included in the custom downloaded ng-cordova.js file. I wouldn’t go for only the update in the documentation.


#10

Well the core module is the combinded js file under one angular module…

Adding this file to the custom build kind of defeats the purpose of the custom build, IMO, but you can always open an issue for it on the ng-cordova repo


#11

As of now my ng-cordova.js I receive from just selecting ‘dialogs’ (parts of it pasted below) does not define the module ‘ngCordova’. People will have to copy it in themselves or have another file for it. And that I think is not intuitive. (At least it wasn’t for me and one other guy in this world. :slight_smile: ) So the custom build should probably have the first about 5 code lines of the full file always where the ngCordova is defined.

angular.module('ngCordova.plugins.dialogs', []) .factory('$cordovaDialogs', [function() { return { alert: ... confirm: ... ... }]);


#12

yes! exactly I think hartington wasn’t understanding what you were saying. Unless the angular implicitly creates ngCordova from the angular.module('ngCordova.plugins.splashscreen', []) line for example, then the generator needs to include the first 5 lines or so.


#13

I did some more investigating and there is also a block at https://raw.githubusercontent.com/driftyco/ng-cordova/master/dist/ng-cordova.js

angular.module('ngCordova.plugins', [
  'ngCordova.plugins.deviceMotion',
  'ngCordova.plugins.camera',
  'ngCordova.plugins.geolocation',
  'ngCordova.plugins.deviceOrientation',
  'ngCordova.plugins.dialogs',
  'ngCordova.plugins.vibration',
  'ngCordova.plugins.network',
  'ngCordova.plugins.device',
  'ngCordova.plugins.barcodeScanner',
  'ngCordova.plugins.splashscreen',
  'ngCordova.plugins.keyboard',
  'ngCordova.plugins.contacts',
  'ngCordova.plugins.statusbar',
  'ngCordova.plugins.file',
  'ngCordova.plugins.socialSharing',
  'ngCordova.plugins.globalization',
  'ngCordova.plugins.sqlite',
  'ngCordova.plugins.ga',
  'ngCordova.plugins.push',
  'ngCordova.plugins.spinnerDialog',
  'ngCordova.plugins.pinDialog',
  'ngCordova.plugins.localNotification',
  'ngCordova.plugins.toast',
  'ngCordova.plugins.capture',
  'ngCordova.plugins.appAvailability',
  'ngCordova.plugins.prefs'  
]);

so the customizer also should include a block of these in the result.


NgCordova: error into module list into ngcordova.js created by builder
#14

Spent an hour debugging today as I’d used the custom build yet nothing was working and it was throwing up $injector issues.

Would be good to get this fixed so others don’t get stung in the same way. Just using the full file for now.

Thanks for finding it!


#15

I’d raised an issue on the github project for ngCordova and the issue had been accepted. But obviously not fixed yet.


#16

Yup, after wasting too many hours, and ignoring all the demo articles, what works for me is to inject the same. For TypeScript users, this becomes
(in the $inject) $cordovaDialogs
(in the constructor) private myvar:Notification
(used in app): this.myvar.alert(passed parms);