我正在尝试在Visual Studio 2013中缩小和捆绑我的AngularJS / WebAPI项目。当我在缩小后运行我的项目时,我得到这样的错误:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=app&
P1 =%5B %24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.13%2F%24injector%2Funpr%3Fp0%3Dn%0Av%2F%3C%40http%3A%2F%2Flocalhost%3A63389%2Fbundles%2Fangular%3Fv%3D_ykkA4necF0i5wrX1pYwFxAqwK5bvRGCF4SEL-Meqac1%3A1%0Ane%2Fu.%24injector%3C%40http%3A%2F
从阅读开始,听起来像Angular在缩小代码后注入有问题。我想弄清楚是否有一个'最佳实践/工作流'来在Visual Studio中调试它。如何理解上述错误?
答案 0 :(得分:7)
我在缩小AngularJs App时遇到的唯一问题是使用函数参数注入语法。像:
app.config(function($serviceA, $serviceB) { ... });
缩小时,函数参数可能会更改为较短的名称。所以这可能会成为:
app.config(function(a, b) { ... });
哪个未知。你应该总是(我还没有看到它的坏情况..)使用数组注入语法:
app.config(['$serviceA', '$serviceB', function($serviceA, $serviceB) { ... }]);
函数参数将被缩小,但字符串常量不会,这使得Angular可以知道您要求的服务的名称,而不管函数参数名称。
答案 1 :(得分:2)
我了解到最好的解决方案不是使用ASP.NET MVC缩小,而是使用Grunt和ng-annotate。这将装饰AngularJS控制器并缩小它们。学习需要一点时间但值得。如果你发现这个有用的话,我可以提供一个Grunt脚本的样本。
答案 2 :(得分:0)
您需要注释代码,因为Visual Studio会缩小更改$ scope和其他变量。
从
改变var MyController = function($scope, $http) { .. }
到
var MyController = ['$scope', '$http', function($scope, $http) { .. }]
参考文献: http://weblogs.asp.net/dwahlin/structuring-angularjs-code和 Angularjs minify best practice
答案 3 :(得分:0)
Angular Documention对此有一个note ......
由于Angular将控制器的依赖关系从参数名称推断到控制器的构造函数,如果你要缩小PhoneListCtrl控制器的JavaScript代码,它的所有函数参数也会缩小,并且依赖注入器也不会能够正确识别服务。
示例:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);