AngularJS with ASP.NET MVC Bundling & Minification - Breaking Scripts

Question

Two controllers appear to be broken in a large Angular JS / ASP.NET MVC project. The application is only broken when running with MVC Bundling and Minification switched on.

I know that the way that dependencies are injected can cause an issue, so I use the following dependency injection style, which should stop this from happening as far as I know.

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

}

The output is as follows:

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
	
	
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)

I'm at a loss as to how to debug this at present. Any ideas?

Answer 1

The issue was as comments in this question, and angular JS documentation for this issue suggest, a dependency mismatch issue. What I was missing, was that several directives we use declare their controllers within the directive code, and it was these directives that were not using the required dependency injection style e.g.

This (incorrect)

(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 this (correct)

(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) {


        }
      }
    }
  ]);

})();

This was very difficult to find because the error message that angular js provides, while well documented, provides no clue as to where the source of the issue might be. I feel this could be improved on.

Knowing this, now I would just search directives for instances of the same syntax. As it was, I had to comment various sections of my template / html until I found the directive that was breaking the page. Once I had that, it led me to focusing on code for that directive, and spotting this issue.