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

Answer 1

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)