javascript - AngularJS错误: $injector:modulerr after being minified

Question

嘿伙计们，当我缩小我的 Angular JS 1 应用程序时，我收到一个错误 Error: $injector:modulerr ，到目前为止，我已经研究过这是我调用依赖项的方式 HomeController 但是我不确定我可能哪里出错了。我注意到这里有一些预先存在的问题，但我找不到解决这个问题的答案。

我感觉对此 Controller 的依赖性可能是问题所在:

  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
                }
            }
        };
}

因为代码被缩小了，所以我猜测函数中调用的依赖项正在以某种方式被破坏。

所以我尝试像这样在函数下方注入(inject)它们:

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

这里是我的应用程序的所有 JS，以防万一不是这个 Controller 导致了这种情况:

 (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;
      };
    };

})();

知道我哪里可能出错吗？谢谢

Answer 1

缩小破坏了代码，因为您正在使用 Implicit Annotation用于依赖注入(inject)。

Implicit Annotation

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

像ng-annotate这样的工具让您在应用程序中使用隐式依赖注释，并在缩小之前自动添加内联数组注释。如果您决定采用这种方法，您可能需要使用 ng-strict-di .

由于这些注意事项，我们建议避免这种注释风格。

--AngularJS Developer Guide -- Dependence Injection