Angular Module 'cordovaHTTP' is not availa

Question

I am running Ionic and trying to use cordovaHTTP for SSL pinning. I followed the instructions on the the github but I get the error that the module isn't there.

My index.html

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

My app.js:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'cordovaHTTP'])

In services.js:

angular.module('starter.services', [])

.service('MyService', function(cordovaHTTP) {

    cordovaHTTP.enableSSLPinning(true, function() {
        console.log('successful ssl pin');

        cordovaHTTP.useBasicAuth("user", "pass", function() {
            console.log('successful basic auth!');

            cordovaHTTP.get(url, function(response) {
                console.log(response.status);
            }, function(response) {
                console.error(response.error);
            });
        }, function() {
            console.log('error basic auth');
        });     
    }, function(){
        console.log('error ssl pin');
    });
});

This results in the error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module cordovaHTTP due to:
Error: [$injector:nomod] Module 'cordovaHTTP' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I have tried messing with this countless times but no dice. Any help is appreciated.

Answer 1

Actually I think you're initializing your module multiple times. In angular factories / services are singleton. Your code look like something this

angular.module('starter', ['ionic', 'MyService', 'cordovaHTTP']) //setters for a module

Please make sure you're injecting right service or factory name. You should change your service declaration way too, like below

angular.module('starter') //Don't use [] it is only getter of above initialized module

.service('MyService', function(cordovaHTTP){ 
      //Code
});

Also please don't forget to load app.js at last. Hope it may help you.

Answer 2

I found the solution from github issues.

1. Make sure that you load the angular js files after cordova js files in index.html.

Here's my index.html:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>

2. Is angular defined?

cordova-HTTP will only instantiate the cordovaHTTP module if angular is defined otherwise it will fall back to window.cordovaHTTP.

You could use this this:

document.addEventListener("deviceready", function () {
  console.log(window.cordovaHTTP);
  console.log(window.CordovaHttpPlugin);  // For some version it's instantiated in this name if angular is not defined.
}, false);

3. Manually bootstrap your AngularJS app instead of using the ng-app attribute.

Code:

<script>
  angular.element(document).ready(function() {
      document.addEventListener("deviceready", function () {
          console.log(window.cordovaHTTP);
          console.log(window.CordovaHttpPlugin);  // For some version it's instantiated in this name if angular is not defined.
          angular.bootstrap(document, ['MyAppName']);
      }, false);
  });
</script>

4. When using it in your controller or service, do not need to add the $.

Just use it like this:

angular.module('MyAppName.services', [])
.service('MyService', ['cordovaHTTP', function(cordovaHTTP){
    // Your codes are here.
}]);