AngularJS與ASP.NET MVC捆綁與縮小 - 破壞腳本

Question

兩個控制器似乎在大型Angular JS/ASP.NET MVC項目中被破壞。在MVC Bundling和Minification打開的情況下運行時，應用程序纔會中斷。

我知道注入依賴關係的方式會導致一個問題，所以我使用以下依賴注入樣式，根據我所知，應該阻止這種情況發生。

angular.module('appMain').controller('example', ['$scope', '$http', '$q', function ($scope, $http, $q) { 

} 

輸出如下：

Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=iProvider%20%3C-%20i 
 
    at Error (native) 
 
    at https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:448 
 
    at https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:15137 
 
    at Object.i [as get] (https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:14214) 
 
    at https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:15212 
 
    at i (https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:14214) 
 
    at r (https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:14426) 
 
    at Object.instantiate (https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:14597) 
 
    at $get (https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:30792) 
 
    at https://fr-dev1/bundles/scripts/angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1:23918 
 
\t 
 
\t 
 
TypeError: Cannot read property '$pristine' of undefined 
 
    at Object.fn (angularjs-app?v=mgXRA005BcSMWlEPNN1MIVPGiTRPO61A505wfBUCzQM1:1) 
 
    at l.$get.l.$digest (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at l.$get.l.$apply (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1 
 
    at Object.r [as invoke] (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at e (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at yf (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at ts (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at HTMLDocument.<anonymous> (angularjs-lib?v=fdBxSfta680G6re4ADdc065MrFCax3DdD3roxFAWe7A1:1) 
 
    at i.Callbacks.l (jquery-lib?v=vEaljJV1h4KYaqn2s6dj9T-6yVrUkuN-z--_W-PVafM1:1)

我手足無措，如何在目前調試此。有任何想法嗎？

Answer 1

這個問題是在這個問題的意見，和angular JS documentation這個問題表明，依賴性不匹配問題。我所缺少的是，我們使用的幾個指令在指令代碼中聲明瞭它們的控制器，並且這些指令沒有使用所需的依賴注入風格，例如

這（不正確）

(function() { 
 

 
    'use strict'; 
 

 
    angular.module('appMain') 
 

 
    .directive('exampleDirective', ['$http', 'someService', 
 
    function($http, someService) { 
 

 
     return { 
 

 
     restrict: 'EA', 
 
     templateUrl: '/Templates/AngularJs/someTemplate.html', 
 
     replace: true, 
 
     scope: { 
 
      ... 
 
     }, 
 
     controller: function($scope) { 
 
      ... 
 
     }, 
 
     link: function(scope, element, attrs) { 
 

 

 
     } 
 
     } 
 
    } 
 
    ]); 
 

 
})();

VS此（正確）

(function() { 
 

 
    'use strict'; 
 

 
    angular.module('appMain') 
 

 
    .directive('exampleDirective', ['$http', 'someService', 
 
    function($http, someService) { 
 

 
     return { 
 

 
     restrict: 'EA', 
 
     templateUrl: '/Templates/AngularJs/someTemplate.html', 
 
     replace: true, 
 
     scope: { 
 
      ... 
 
     }, 
 
     controller: ['$scope', 
 
      function($scope) { 
 
      ... 
 
      } 
 
     ], 
 
     link: function(scope, element, attrs) { 
 

 

 
     } 
 
     } 
 
    } 
 
    ]); 
 

 
})();

這是很難找到因爲... e角度js提供的錯誤消息雖然有據可查，但並未提供關於問題根源可能出在哪裏的線索。我覺得這可以改進。

瞭解了這一點，現在我只是搜索指令來查找相同語法的實例。事實上，我不得不評論我的模板/ html的各個部分，直到我找到了打破頁面的指令。一旦我有了這些，就會讓我專注於該指令的代碼，並發現這個問題。