Question

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

我感觉这个控制器的依赖可能是个问题：

  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'];

以下是我的应用程序的所有JS，以防万一它不是这个控制器造成这个：

 (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

在缩小angularjs代码之前，您应该首先对其进行注释。像ng-annotate这样的工具会处理依赖注入注释，以便您的代码可以安全地缩小。

还有针对grunt和gulp的特定ng-annotate任务。

Answer 2

缩小代码会破坏代码，因为您使用Implicit Annotation进行依赖注入。

隐式注释


小心：如果您计划minify您的代码，您的服务名称将被重命名并破坏您的应用。


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

由于这些警告，我们建议避免使用这种注释方式。

- AngularJS Developer Guide -- Dependence Injection

Answer 3

尝试使用

定义每个模块

angular.module（name，[requires]）

所述语法here

angular.module（'myModule'）。direire（'myDirective'， [' myCoolService '，function（myCoolService）{ //此指令定义不会抛出未知提供程序。 }]）;

在注入之前查看一次声明的myCoolService（以粗体显示），这不会缩小

AngularJS错误：缩小后的$ injector：modulerr

3 个答案:

隐式注释