Cause of angular error: "Error: No module: ngCookies"?

Question

In my app I'm doing this:

angular.module('myApp.controllers', ['ngCookies']).
  controller('AppCtrl', function ($scope, socket, $cookies) {
        console.log("socket:");
        console.log(socket);
        $scope.component = 'main';
        gLoggedIn = "no";
        gUserName = "";
        console.log("reset logged in status");
        sid = $cookies;
        $scope.setComponent = function(val) {
            $scope.component = val;
        }
  }).

But I keep getting the error:

TypeError: 'undefined' is not an object (evaluating 'angular.module')" and "Error: No module: ngCookies

Obviously I load ['ngCookies'] here in the module! And what's more, I did a bower install of angular, angular-cookies, and angular-loader, and added this to my index.jade:

script(src='bower_components/angular-cookies/angular-cookies.js')
script(src='bower_components/angular/angular.js')
script(src='bower_components/angular-loader/angular-loader.js')

So what gives?

I tried adding ['ngCookies'] in various places to no avail: app.js, nope; services.js, nope; so what is the problem?

Answer 1

I had the exact same fail but with a brand new proyect created with the yeoman angular generator. I got the error with the grunt test command and I realized that the problem was that the karma.conf.js doesn't load the angular-cookies ( either angular-resources and angular-sanitize ) dependencies. So I added them in the files array of this file.

files: [
  'app/bower_components/angular/angular.js',
  'app/bower_components/angular-cookies/angular-cookies.js',
  'app/bower_components/angular-resource/angular-resource.js',
  'app/bower_components/angular-sanitize/angular-sanitize.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

And it works!

I hope it's useful to yeoman users!

Answer 2

You are loading angular-cookies before loading angular.js. Rearrange like this:

script(src='bower_components/angular/angular.js')
script(src='bower_components/angular-cookies/angular-cookies.js')
script(src='bower_components/angular-loader/angular-loader.js')

I think this will solve your issue.