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?

Can you show any directives, or the controller itself that you're using? You're on the right path but it looks like you've missed an injection somewhere — mikeswright49
– mikeswright49, Commented Jul 20, 2015 at 15:39
I think there's too much code to dump, probably 40 controllers and directives all together. I have scoured the code, maybe not hard enough possibly. I wasn't sure if a missing injection was always the source of this error message. Will comment again when I've checked (again!). Thanks. — gbro3n
– gbro3n, Commented Jul 20, 2015 at 18:49
Yea, you can tell because its looking for iProvider, which unless you have a service called i it's picking up the missing dependency. — mikeswright49
– mikeswright49, Commented Jul 20, 2015 at 18:52

gbro3n · Accepted Answer · 2015-07-21 14:04:02Z

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.

For anyone else who took a while to spot the difference, it's on the controller: line

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related