Latest ionic + ngCordova not working?

ionic-v1
1

I’ve just attempted new fresh installs of everything on a 10.10 mac with xcode 6.1. I have Ionic 1.2.8 installed via npm and cordova 4.

I went to the ngCordova site, downloaded the example/demo zip file and built it. It built just fine with a new project, and I ran it on my iPhone 6 just fine, except not a single one of the plugins worked. Has anyone else done this with more success?

I also had safari’s web inspector opened up to watch the javascript errors as well, and I don’t see too many - or in particular there’s nothing to suggest major problems with the code.

2

on second look, i’ve never debugged this before, but it doesn’t look good. this is essentially what happens when any plugin is accessed:

3

Hi there @hay

Just a question, have you initialised the plugins as per the documentation?

Also is the reference to the cordova.js file in your index.html?

I’ve had problems related to both those issues when using ngCordova.

4

I’m using the demo code that they apparently packaged (link here), it’s supposed to be a demo of all the ngCordova plugins working, so I was counting on it actually working…

I did check though to just make sure and everything looks fine…here’s the entire head:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>ng-cordova demo</title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="lib/ace-builds/src-noconflict/ace.js"></script>
  <script src="lib/angular-ui-ace/ui-ace.min.js"></script>

  <!-- Facebook Plugin for web-development -->
  <script>
    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

  <!-- Facebook Plugin copy pasted from the plugin/facebookplugin/js/... for web-dev -->
  <script src="lib/facebookConnectPlugin.js"></script>

  <!-- ng cordova js -->
  <script src="lib/ngCordova/ng-cordova.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="app/app.js"></script>
  <script src="app/adMob/adMob.ctrl.js"></script>
  <script src="app/appAvailability/appAvailability.ctrl.js"></script>
  <script src="app/batteryStatus/batteryStatus.ctrl.js"></script>
  <script src="app/barcodeScanner/barcodeScanner.ctrl.js"></script>
  <script src="app/camera/camera.ctrl.js"></script>
  <script src="app/contacts/contacts.ctrl.js"></script>
  <script src="app/clipboard/clipboard.ctrl.js"></script>
  <script src="app/datePicker/datePicker.ctrl.js"></script>
  <script src="app/device/device.ctrl.js"></script>
  <script src="app/deviceMotion/deviceMotion.ctrl.js"></script>
  <script src="app/deviceOrientation/deviceOrientation.ctrl.js"></script>
  <script src="app/dialogs/dialogs.ctrl.js"></script>
  <script src="app/facebook/facebook.ctrl.js"></script>
  <script src="app/file/file.ctrl.js"></script>
  <script src="app/flashlight/flashlight.ctrl.js"></script>
  <script src="app/geolocation/geolocation.ctrl.js"></script>
  <script src="app/globalization/globalization.ctrl.js"></script>
  <script src="app/googleAnalytics/googleAnalytics.ctrl.js"></script>
  <script src="app/network/network.ctrl.js"></script>
  <script src="app/oauth/oauth.ctrl.js"></script>
  <script src="app/media/media.ctrl.js"></script>
  <script src="app/preferences/preferences.ctrl.js"></script>
  <script src="app/printer/printer.ctrl.js"></script>
  <script src="app/pushNotifications/pushNotifications.ctrl.js"></script>
  <script src="app/socialSharing/socialSharing.ctrl.js"></script>
  <script src="app/sqlite/sqlite.ctrl.js"></script>
  <script src="app/statusbar/statusbar.ctrl.js"></script>
  <script src="app/toast/toast.ctrl.js"></script>
  <script src="app/vibration/vibration.ctrl.js"></script>
  <script src="app/touchid/touchid.ctrl.js"></script>

</head>
5

Any of the devs want to answer this? I’m still having zero luck, these are the errors when the app loads:

[Error] TypeError: null is not an object (evaluating 'document.getElementById('fb-root').appendChild')
	(anonymous function) (facebookConnectPlugin.js, line 180)
	global code (facebookConnectPlugin.js, line 182)
[Error] Failed to load resource: The requested URL was not found on this server. (sdk.js, line 0)
[Error] TypeError: undefined is not an object (evaluating 'window.cordova.plugins.Keyboard')
	(anonymous function) (app.js, line 43)
	(anonymous function) (ionic.bundle.js, line 37061)
	onPlatformReady (ionic.bundle.js, line 2246)
	subscribe (cordova.js, line 699)
	addEventListener (cordova.js, line 126)
	onWindowLoad (ionic.bundle.js, line 2230)
6

Hey there, which plugin are you trying to use?

7

All of them that are included in the demo…you can see the paste above has all the plugins included. I got these files from this site: http://ngcordova.com/docs, I downloaded the zip file which included the ngCordova demo. I built it using Ionic 1.1.12, cordova 4.1.2, and am running it on my iphone 6 which has 8.1.2 on it.

8

Alright, do you have all the native plugins installed?

The demo does not come setup with all the native code needed for the plugins

9

I think so, I mean I have:

org.apache.cordova.device
org.apache.cordova.console
org.apache.cordova.geolocation
org.apache.cordova.contacts
org.apache.cordova.dialogs

Do you think this is related to:
http://www.openradar.me/radar?id=5839348817723392

Which has the corresponding cordova bug:
https://issues.apache.org/jira/browse/CB-7539

?

This would be right in line with none of my file://'s being accessible.

10

Well cordova doesn’t use wkwebview, so thats not an issue.

For each ngCordova plugin, there is a native counterpart.

http://ngcordova.com/docs/

All ngCordova does is just wrap the cordova javascript in a more angular-friednly syntax. You’ll still need to add the appropriate plugins which are mentioned in the docs

11

Well then! This is interesting, I got a few working this way - contacts still doesn’t seem to do anything. No errors though, do you know what the contacts demo is supposed to do? I type in a name or something and hit add contact and nothing happens. Does cordova allow for contacts to be used in-app, for adding friends via phone contacts and the like?

12

You can read all about the plugins through cordova’s plugin site.

http://plugins.cordova.io/#/