AngularJS: Uncaught Error: [$injector:nomod] Module _ is not available! | Multiple References to Module

Question

I am currently trying to reference a single AngularJS module within various directives and services like the one below.

module.js

(function () {
    'use strict';

    angular.module('operations.setup.holidays.calendar', []);

})();

When I try to reference it in one directive/service/controller it works fine, but when I try to reference it in say a directive and a service I get: Uncaught Error: [$injector:nomod] Module 'operations.setup.holidays.calendar' is not available!

directive.js (works if this is the only thing referencing 'operations.setup.holidays.calendar')

(function () {
    'use strict';

    angular
        .module('operations.setup.holidays.calendar')
        .directive('yearlyCalendarDirective', yearlyCalendarDirective);

    function yearlyCalendarDirective(){
        return{
          template: "<h1>Year Calendar Directive</h1>"
        };
    }
})();

service.js (adding something like this causes the specified error)

(function(){
    'use strict';

    angular
        .module('operations.setup.holiday.calendar')
        .service('Calendar',Calendar);

    function Calendar(){

    }
})();

Adding something like .module('operations.setup.holiday.calendar',[]) gets rid of the error, but from what I understand this creates a new module instead of referencing the old one?

Edit: Here is a JSFiddle

@devqon Yes, I thought that might be the issue but module.js is the first one loaded. — Levi Barker, Apr 28 '16 at 17:31

score 1 · Accepted Answer · edited May 23 '17 at 12:22

According to this answer, calling anonymous functions doesn't guarantee the functions will be calling in the order.

maybe you can load all code in one anonymous function:

(function() {
  'use strict';
  angular.module('CalendarApp', []);

  angular.module('CalendarApp').directive('yearlyCalendar', function() {
    return {
      restrict: 'E',
      scope: {},
      template: '<span>Here is a YEARLY calendar</span>'
    }
  });

  angular.module('CalendarApp').directive('monthlyCalendar', function() {
    return {
      restrict: 'E',
      scope: {},
      template: '<span>Here is a MONTHLY calendar</span>'
    }
  });

  angular.module('CalendarApp').service('CalendarData', function() {
    function CalendarData() {
      vm = this;
      vm.today = new Date();
      return new CalendarData();
    }
  });
})();

if you have this code separated in many files, don't use anonymous functions (calling the code directly instead)

Thanks @Diego! That seemed to work! So if I wanted to keep them separated I would just remove the anonymous function closures? `(function() {})();` — Levi Barker, Apr 29 '16 at 16:47
yes.. just call the code inside that anonymous functions directly — Diego Polido Santana, May 01 '16 at 07:04

AngularJS: Uncaught Error: [$injector:nomod] Module _ is not available! | Multiple References to Module

1 Answers1