AngularJS错误:$injector:modulerr被最小化后

AngularJS Error: $injector:modulerr after being minified

本文关键字:最小化 modulerr injector 错误 AngularJS      更新时间:2023-09-26

嘿伙计们,当我最小化我的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;
      };
    };
})();

你知道我哪里做错了吗?由于

由于您使用隐式注释进行依赖注入,因此缩小会破坏代码。

隐性注释

小心:如果你打算缩减你的代码,你的服务名将被重命名,并破坏你的应用程序。

像ng-annotate这样的工具可以让你在应用中使用隐式依赖注释,并在最小化之前自动添加内联数组注释。如果您决定采用这种方法,您可能希望使用ng-strict-di

由于这些注意事项,我们建议避免使用这种风格的注释。

——AngularJS开发者指南——依赖注入

在最小化angularjs代码之前,你应该先注释它。像ng-annotate这样的工具会负责依赖注入注释,这样你的代码就可以安全地最小化了。

对于grunt和gulp也有特定的ng注释任务。

尝试用

定义每个模块

角。模块(名字,[要求])

此处描述的

语法

angular.module("myModule里").directive("myDirective",['myCoolService', function (myCoolService) {//该指令定义不会抛出未知提供商。}));

查看myCoolService(粗体)在注入之前声明过一次,它不会被最小化