Question

我正在尝试在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中调试它。如何理解上述错误？

Answer 1

我在缩小AngularJs App时遇到的唯一问题是使用函数参数注入语法。像：

app.config(function($serviceA, $serviceB) { ... });

缩小时，函数参数可能会更改为较短的名称。所以这可能会成为：

app.config(function(a, b) { ... });

哪个未知。你应该总是（我还没有看到它的坏情况..）使用数组注入语法：

app.config(['$serviceA', '$serviceB', function($serviceA, $serviceB) { ... }]);

函数参数将被缩小，但字符串常量不会，这使得Angular可以知道您要求的服务的名称，而不管函数参数名称。

Answer 2

我了解到最好的解决方案不是使用ASP.NET MVC缩小，而是使用Grunt和ng-annotate。这将装饰AngularJS控制器并缩小它们。学习需要一点时间但值得。如果你发现这个有用的话，我可以提供一个Grunt脚本的样本。

Answer 3

您需要注释代码，因为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

Answer 4

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

在Visual Studio中缩小和捆绑AngularJS

4 个答案: