AngularJS错误:缩小后$ injector:modulerr [英] AngularJS Error: $injector:modulerr after being minified
问题描述
伙计们，当我缩小Angular JS 1应用程序时遇到错误Error: $injector:modulerr，到目前为止，我已经研究出这是我对HomeController的依赖关系的调用方式，但是我不确定自己可能在哪里出问题了.我注意到这里已经存在一些问题，但是找不到解决该问题的答案.
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'];
这里是我应用程序的所有JS，以防万一不是由该控制器引起的:
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
推荐答案
由于您正在使用隐式注释用于依赖项注入.
The minification is breaking the code because you are using Implicit Annotation for dependency injection.
隐式注释
谨慎:如果您打算缩小代码，您的服务名称将得到重命名并破坏您的应用.
Careful: If you plan to minify your code, your service names will get renamed and break your app.
ng-annotate 之类的工具可让您在应用中使用隐式依赖项注释并自动添加内联缩小之前先进行数组注释.如果您决定采用这种方法，则可能要使用ng-strict-di.
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错误:缩小后$ injector:modulerr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
