AngularJS Error: $injector:modulerr after being minified

Question

Hey guys I am getting an error Error: $injector:modulerr when I minify my Angular JS 1 app, so far I have researched that it is the way that I am calling dependencies to my HomeController however I am unsure where I might be going wrong. I have noticed some pre-existing questions on here however I can't find the answer to solve this.

I have a feeling the dependencies on this controller might be the issue:

  function HomeController($http, $firebaseArray, $scope, $scrollArray) {
    var vm = this;
    var baseRef = new Firebase("https://racoon.firebaseio.com/yello");
    vm.feeds = $scrollArray(baseRef, 'date');

        vm.config = {
            plugins: {
                controls: {
                    autoHide: true,
                    autoHideTime: 1000
                }
            }
        };
}

Because the code gets minified I'm guessing the dependencies that are being called in the function are being mangled some how.

So I tried injecting them like so just below the function:

HomeController.$inject = ['$http', '$firebaseArray', '$scope', '$scrollArray'];

Here is all of the JS for my app just in case it isn't this controller that is causing this:

 (function() {
  'use strict';

  angular
    .module('thatsPulman', [
      // Angular modules.
      'ngSanitize',

      // Third party modules.
      'firebase',

      // Custom modules.
      'app.core'
    ])

})();

(function() {
  'use strict';
  angular.module('app.core', ['iso.directives', 'ngSanitize', 'linkify', 'angular-images-loaded', 'imagesLoaded', 'yaru22.angular-timeago','infinite-scroll','com.2fdevs.videogular', 'com.2fdevs.videogular.plugins.controls', 'com.2fdevs.videogular.plugins.overlayplay'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

})();

(function() {
  'use strict';

  angular
    .module('app.core')
    .controller('HomeController', HomeController)
    .factory('$scrollArray', scrollArray);

  function HomeController($http, $firebaseArray, $scope, $scrollArray) {
    var vm = this;
    var baseRef = new Firebase("https://racoon.firebaseio.com/yello");
    vm.feeds = $scrollArray(baseRef, 'date');

        vm.config = {
            plugins: {
                controls: {
                    autoHide: true,
                    autoHideTime: 1000
                }
            }
        };
}
HomeController.$inject = ['$http', '$firebaseArray', '$scope', '$scrollArray'];

  function scrollArray($firebaseArray, $timeout) {
    return function(baseRef, field) {
      // create a special scroll ref
      var scrollRef = new Firebase.util.Scroll(baseRef, field);
      // generate a synchronized array with the ref
      var list = $firebaseArray(scrollRef);
      // store the scroll namespace on the array for easy ref
      list.scroll = scrollRef.scroll;
      list.scroll.next(10);
      return list;

  }}



})();

(function() {
  'use strict';

  angular
    .module('app.core')
    .directive('imagesLoaded', imagesLoaded)
    .directive('scroll', scroll);

  function imagesLoaded($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $elem, $attr) {

            $timeout(function() {
                $elem.isotope();

                $elem.isotope('once', 'layoutComplete', function(isoInstance, laidOutItems) {
                    $elem.imagesLoaded(function() {
                        $elem.isotope('layout');
                    });
                });
            }, 0);
        }
    };
  }

function scroll($window) {
      return function(scope, element, attrs) {
          angular.element($window).bind("scroll", function() {
               if (this.pageYOffset >= 300) {
                   scope.showContent = true;
               } else {
                   scope.showContent = false;
               }
              scope.$apply();
          });
      };
  };

})();

(function() {
  'use strict';

  angular
    .module('app.core')
    .filter('instagramLink', instagramLink);

    function instagramLink($filter, $sce) {
      return function(text, target) {
        if (!text) return text;

        var replacedText = $filter('linky')(text, target);
        var targetAttr = "";
        if (angular.isDefined(target)) {
            targetAttr = ' target="' + target + '"';
        }

        // replace #hashtags
        var replacePattern1 = /(^|\s)#(\w*[a-zA-Z_]+\w*)/gim;
        replacedText = replacedText.replace(replacePattern1, '$1<a href="https://www.instagram.com/explore/tags/$2"' + targetAttr + '>#$2</a>');

        $sce.trustAsHtml(replacedText);
        return replacedText;
      };
    };

})();

Any idea where I might be going wrong? Thanks

Answer 1

The minification is breaking the code because you are using Implicit Annotation for dependency injection.

Implicit Annotation

Careful: If you plan to minify your code, your service names will get renamed and break your app.

Tools like ng-annotate let you use implicit dependency annotations in your app and automatically add inline array annotations prior to minifying. If you decide to take this approach, you probably want to use ng-strict-di.

Because of these caveats, we recommend avoiding this style of annotation.

--AngularJS Developer Guide -- Dependence Injection

Answer 2

Try define each module with the

angular.module(name, [requires])

syntax as described here

angular.module('myModule') .directive('myDirective', ['myCoolService', function (myCoolService) { // This directive definition does not throw unknown provider. }]);

Look myCoolService(in bold) declared once before the injection, this will not minified

Answer 3

Before minifying angularjs code you should annotate it first. Some tools like ng-annotate will take care of dependency injection annotation so that your code is ready to be safely minified.

There are also specific ng-annotate tasks for grunt and gulp.