Pulling Out Hair (now bald)! ngCordova - Module 'ngCordova' is not available!


#1

I wouldn’t be writing on this forum if I didn’t have a serious problem. I think that I am just overlooking something, but having a second or third eye would help me out a lot. I am trying to get ngCordova to work, but I keep getting “Module ‘ngCordova’ is not available!” in the Chrome browser. Yes, I know that Cordova will not work in Chrome, but even after building and emulating the app in iOS, something still is wrong.

Here is a snippet of my code:

var sample = angular.module('sampleVoice', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
if(window.StatusBar) {
  StatusBar.styleDefault();
    }
  });
});

sample.controller('RecordVoice', function($scope, $cordovaCapture){

  $scope.captureAudio = function() {
    var options = { limit: 1, duration: 10 };

    $cordovaCapture.captureAudio(options).then(function(audioData) {
  // Success! Audio data is here
    }, function(err) {
      // An error occured. Show a message to the user
    });
  }

});

Here is the corresponding HTML:

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="lib/lodash/dist/lodash.js"</script>
  <script src="lib/ngCordova/dist/ng-cordova.js"></script>

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

<!-- your app's js -->
<script src="js/app.js"></script>
  </head>
 <body ng-app="sampleVoice">

Any help would be appreciated.


#2

could you show your ng-cordova.js?


#3

Well it’s the one from Bower. It has something like 3000+ lines of code.


#4

Look what issues come if u try to start your project as localhost. Go with your Command Line Tool in the folder an type this.

$ ionic serve

In Chrome look in the Developer Tool and post the errors plz


#5

make sure that the url to ng-cordova.js is correct, I got the same issue but this was because i missed the corrected url


#6

Yeah, I thought about that too. I checked the URL, it’s correct. Thanks.


#7

Alright Azad - Here are the errors:

Uncaught Error: [$injector:modulerr] Failed to instantiate module sample due to:
Error: [$injector:modulerr] Failed to instantiate module ngCordova due to:
Error: [$injector:nomod] Module ‘ngCordova’ 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.
http://errors.angularjs.org/1.2.25/$injector/nomod?p0=ngCordova
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:9302:17
at ensure (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9226:38)
at module (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9300:14)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11503:22
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11504:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=ngCordova&p1=Error…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A11497%3A5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11531:15
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11504:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11437:11)
at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9069:20)
at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9084:12)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=sample&p1=Error…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A9084%3A12)


#8

I know its may not be the issue, but can you try to remove the lodash from your app and test again, the error clearly stated that they cant find the module or the module name is wrong.


#9

<script src="lib/lodash/dist/lodash.js"</script> you dont close this tag :smiley: HAHA LMAO definitely the worst kind of bug


#10

Right about now, @aalger is smashing his head off the keyboard, without event the benefit of hair to cushion the blow.


#11

Yeah - Crap! Thanks. You see, sometimes you need more eyes if you have been looking at this forever … Thanks for all the rapid assistance.


#12

Agreed! Wish I could say I didn’t make them any more, but that would be a lie. Don’t know what editor is being used, but a good coloured / syntax highlighted one can make all the difference (Sublime Text in my case - saved my bacon on a load of occasions)


#13

I use Sublime, but I have been thinking about Web Storm. Sublime did not show me the error! … I guess this would be a topic suited better for another forum.


#14

Not that I disbelieve you (we might have different colour schemes / settings after all) but you’re right! Just applied the same edit to my lodash include and I wouldn’t have seen it either: not only that, I would have dismissed a mistype because I “know” Sublime would highlight it. Interesting, not often Sublime drops the ball.


#15

Yeah, I like Sublime. It’s been my best friend for awhile. I’m just looking to go the IDE route rather than just a text editor.


#16

FWIW I started off using (paid) WebStorm - I consider it excellent value for money, and John Lindquist always uses it for the egghead.io videos, so there’s value in that. Just felt like there was a lot of it to get to grips with. Might have to revisit that decision.


#17

The galaxy is now at peace!


#18

Hi sir, may i know how you fix this issue?
I have the exact problem as you. appreciate


#19

My issue was with a missing closing tag in my HTML file.


#20

Thank you very much.

I do fixed the problem as well.

Here is my solution for my case, in case anyone needs:

I just run the following command in the ionic project

bower install -SF ngCordova