在Visual Studio中縮小和捆綁AngularJS

Question

我正在嘗試在Visual Studio 2013中縮小和捆綁我的AngularJS / WebAPI項目。當我在縮小后運行我的項目時，我收到如下錯誤：

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=app& =％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縮小，而是使用帶有ng-annotate的 Grunt 。 這將裝飾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縮小最佳實踐

Answer 4

Angular Documention有一個關於這個的說明 ......

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