Should custom cordova plugins be made available based on the following steps:

  1. run “cordova plugin add [plugin address]” in CLI
  2. run “ionic plugin add [plugin address]” in CLI
  3. run “ionic serve --lab” in CLI
  4. check web inspector for “window.cordova” object

OR, am I over-simplifying something that is inherently more complex? I ask this question namely due to the consistent lack of success that is being expressed within this forum. For those experiencing the problem, the behavior is consistent: the “cordova” object is NOT being made available on the DOM. I must be missing something…

The cordova library will ONLY be available on the device, which would be when you do an emulate or run on simulator or device.

As far as plugins, you can just add them using the ionic cli, your option #2. But keep in mind they will only work on the actual device and not in the browser, so you should always check first for the cordova and plugin global variable before using the plugin so you dont get errors in your broswer console during development using ionic serve

thanks for the (very) quick response, djett. Completely understood, as I am doing exactly as you are instructing – checking the global namespace for the cordova and cordova.plugin objects. However, no success. They are not showing up. (I am checking the global namespace simply for the purpose of ensuring the cordova object exists) I have tried the following:

  1. remove “ng-app” directive from body tag, and instead placing in
  2. referenced “cordova.js” AFTER all other .js files within my index.html file.

Thanks. -Albert

no prob.

One approach is to manually bootstrap your angular application once deviceready is fired. You could place the following javascript in your index after cordova and angular are loaded (keep ng-app removed). This will fire regardless of whether you are running in a browser or mobile device, but will ensure that cordova IS loaded if on a mobile device.

 (function (window, document, angular) {
   'use strict';

   window.ionic.Platform.ready(function () {
     angular.bootstrap(document, ['yourAppModule']);
 }(window, document, angular));

yeah tried that and it didn’t appear to work either. It appears that there are several posts within this forum that speak to this particular solution (bootstrapping the angular app).

On a side note, I have an offer for you: $100 to solve 2 problems I am having. The first problem is what you have already gotten into. The 2nd problem is getting the IOS emulator to work with my app (which does work with the Ionic lab). I have paypal ready to go after the problem have been solved ($50 initially, and $50 afterwards). You can even record the session just in case you feel that I may not uphold my word. Otherwise, I will post this proposition in the forum.

Thanks. -Albert

Is your project on your github? if so give I can fork your repo and send you a pull request with the changes.

So if I understand right you are trying to

  1. bootstrap the app so cordova is available throughout the app when run on device?
  2. Being able to test #1 on an ios simulator rather than ionic serve?

hey djett. sorry, didn’t see your last reply. Dont’ have my proj on github, but that’s irrelevant as I tried achieving these basic things via the sample app that is created when using “ionic start myApp tabs”. Anyway, I am retiring this problem and leaving JS altogether, and onto Swift.

Thanks for your help. -Albert

1 Like