Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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?

share|improve this question
1  
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 Jul 20 '15 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. – gb2d Jul 20 '15 at 18:49
1  
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 Jul 20 '15 at 18:52
up vote 2 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.