Processing
 

“Unknown provider: aProvider <- a” How do I find the original provider?

10/02/2014 21:51#1

Joined at: 12 months ago

Post: 13

Thank: 0

Thanked: 0

When I'm loading the minified (through UglifyJS) version of my AngularJS application, I get the following error in the console:

Unknown provider: aProvider <- a 

Now, I realize that this is due to variable name mangling. The unmangled version works just fine. However, I do want to make use of variable name mangling, as it drastically reduces the size of our JS output file.

For that reason, we're using ngmin in our build process, but it doesn't seem to resolve this issue, even though it served us well in the past.

So, to debug this issue, I enabled source maps in our uglify grunt task. They are generated just fine and Chrome does load the maps from the server. Yet, I still get the same unhelpful error message, even though I was under the impression that I should now see the original name of the provider.

How do I get Chrome to use the source maps to tell me which provider is the problem here, or, alternatively, how can I find out the provider in another way?

14/02/2014 18:36Top#2

Joined at: 12 months ago

Post: 13

Thank: 0

Thanked: 0

I'd still love to know how I could have found the place in our source code that caused this issue, but I have since been able to find the problem manually.

There was a controller function declared on the global scope, instead of using a .controller() call on the application module.

So there was something like this:

function SomeController( $scope, i18n ) { /* ... */ } 

This works just fine for AngularJS, but to make it work right with mangling, I had to change it to:

var applicationModule = angular.module( "example" ); function SomeController( $scope, i18n ) { /* ... */ } applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] ); 

After further tests, I actually found instances of more controllers that also caused issues. This is how I found the source of all of them manually:

First of all, I consider it rather important to enable output beautification in the uglify options. For our grunt task that meant:

options : {     beautify : true,     mangle   : true } 

I then opened the project website in Chrome, with the DevTools open. Which results in an error like the one below being logged:

The method in the call trace we're interested in, is the one I marked with an arrow. This is providerInjector in injector.js. You're going to want to place a breakpoint where it throws an exception:

When you now re-run the application, the breakpoint will be hit and you can jump up the call stack. There will be a call from invoke in injector.js, recognizable from the "Incorrect injection token" string:

The locals parameter (mangled to d in my code) gives a pretty good idea about which object in your source is the problem:

A quick grep over our source finds many instances of modalInstance, but going from there, it was easy to find this spot in the source:

var ModalCreateEditMeetingController = function( $scope, $modalInstance ) { }; 

Which must be changed to:

var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) { } ]; 

In case the variable does not hold useful information, you can also jump further up the stack and you should hit a call to invoke which should have additional hints:

Prevent this from happening again

Now that you've hopefully found the problem, I feel that I should mention how to best avoid this from happening again in the future.

Obviously, you could just use the inline array annotation everywhere, or the (depending on your preference) $inject property annotation and simply try not to forget about it in the future. If you do so, make sure to enable strict dependency injection mode, to catch errors like this early.

Watch out! In case you're using Angular Batarang, StrictDI might not work for you, as Angular Batarang injects unannotated code into yours (bad Batarang!).

Or you could let ng-annotate take care of it. I highly recommend doing so, as it removes a lot of potential for mistakes in this area, like:

  • DI annotation missing
  • DI annotation incomplete
  • DI annotation in wrong order

Keeping the annotations up-to-date is simply a pain in the ass and you shouldn't have to do it if it can be done automatically. ng-annotate does exactly that.

It should integrate nicely into your build process with grunt-ng-annotate and gulp-ng-annotate.

15/10/2014 11:58Top#3

Joined at: 12 months ago

Post: 5

Thank: 0

Thanked: 0

Oliver Salzburg's write-up was fantastic. Upvoted.

Tip for anyone who might have this error. Mine was simply caused by forgetting to pass in an array for a directive controller:

BAD

return {     restrict: "E",     scope: {                     },     controller: ExampleDirectiveController,     templateUrl: "template/url/here.html" }; 

GOOD

return {     restrict: "E",     scope: {                     },     controller: ["$scope", ExampleDirectiveController],     templateUrl: "template/url/here.html" }; 
06/02/2015 03:33Top#4

Mark Fox

Member

Joined at: 8 months ago

Post: 2

Thank: 0

Thanked: 0

use ng-strict-di with ng-app

If you're using Angular 1.3 you can save yourself a world of hurt by using ngStrictDi directive with ngApp:

<html lang="en" ng-app="myUglifiablyGreatApp" ng-strict-di> 

Now — pre-minification — anything that doesn't use annotations will blow up your console and you can see the friggin' name without hunting through mangled stack traces.

Per the docs:

the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification)

One caveat, it only detects that there are annotations, not that the annotations are complete.

Meaning:

['ThingOne', function(ThingA, ThingB) { … }] 

Will not catch that ThingB isn't part of the annotation.

Credit for this tip goes to the ng-annotate folks, which is recommend over the now deprecated ngMin.

13/09/2014 05:08Top#5

Xuwen

Member

Joined at: 6 months ago

Post: 1

Thank: 0

Thanked: 0

I just had the same problem and resolved it by simply replacing ngmin (now deprecated) with ng-annotate for my grunt build task.

It seems that yeoman angular has also been updated to use ng-annotate as of this commit: https://github.com/yeoman/generator-angular/commit/3eea4cbeb010eeaaf797c17604b4a3ab5371eccb

However if you are using an older version of yeoman angular like me, just replace ng-min with ng-annotate in your package.json:

-    "grunt-ngmin": "^0.0.3", +    "grunt-ng-annotate": "^0.3.0", 

run npm install (then optionally npm prune), and follow the changes in the commit to edit Gruntfile.js.

10/02/2014 22:05Top#6

Dalorzo

Member

Joined at: 12 months ago

Post: 27

Thank: 0

Thanked: 0

To minify angular all you need is to do is to change your declaration to the "array" declaration "mode" for example:

From:

var demoApp= angular.module('demoApp', []); demoApp.controller(function demoCtrl($scope) { } ); 

To

var demoApp= angular.module('demoApp', []); demoApp.controller(["$scope",function demoCtrl($scope) { }]); 

How to declare factory services?

demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {     return {           //some object     }; }]); 
25/02/2015 14:23Top#7

Joined at: 6 months ago

Post: 1

Thank: 0

Thanked: 0

Also do not forget the resolve property of the route. It also must be defined as the array:

$routeProvider.when('/foo', {     resolve: {         bar: ['myService1', function(myService1) {             return myService1.getThis();         }],         baz: ['myService2', function(myService2) {             return myService2.getThat();         }]     } }); 
04/08/2015 18:13Top#8

Joined at: 6 months ago

Post: 1

Thank: 0

Thanked: 0

in order to know what the original variable name was you can change how uglify mangles the variables:

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

SymbolDef.prototype = {   unmangleable: [...],   mangle: function(options) {     [...]     this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name;     [...]   } }; 

and now the error is much more obvious

Error: [$injector:unpr] Unknown provider: a_orig_$stateProvider http://errors.angularjs.org/1.3.7/$injector/unpr?p0=a_orig_%24stateProvider at eval (eval at <anonymous> (http://example.com/:64:17), <anonymous>:3155:20) 

EDIT

So obvious now...

Gruntfile.js

uglify: {   example: {     options: {       beautify: true,       mangle: true     },     [...]   },   [...] } 

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

var numberOfVariables = 1; SymbolDef.prototype = {   unmangleable: [...],   mangle: function(options) {     [...]     this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name+"_"+numberOfVariables++;     [...]   } }; 

now each variable is mangled to a unique value that also contains the original... just open up the minified javascript and search for "a_orig_$stateProvider_91212" or whatever... you will see it in it's original context...

couldn't be any easier...

19/11/2015 18:09Top#9

Joined at: 12 months ago

Post: 6

Thank: 0

Thanked: 0

A quick and dirty fix for this if you don't require Uglify to mangle/shorten your variable names is to set mangle = false in your Gruntfile

    uglify: {         compile: {             options: {                 mangle   : false,                 ...             },         }     } 
29/07/2016 08:27Top#10

Joined at: 6 months ago

Post: 1

Thank: 0

Thanked: 0

With generator-gulp-angular:

   /** @ngInject */     function SomeController($scope, myCoolService) {  } 

Write /** @ngInject */ before each controller, service, directive.

Similar articles

Chrome, THREE.js: Cross-origin image load denied

5 years ago - Reply: 5 - Views: 271

Prevent Google Chrome Log XMLHttpRequest

3 years ago - Reply: 5 - Views: 277

How can I include ChromeDriver in a JAR?

3 years ago - Reply: 3 - Views: 83

Chrome geolocation not working on any site

3 years ago - Reply: 1 - Views: 49

wrong borders' width in android browser

3 years ago - Reply: 4 - Views: 207

Uncaught SyntaxError: Unexpected token < On Chrome

3 years ago - Reply: 10 - Views: 472

Flashdata not getting cleared in Codeigniter

4 years ago - Reply: 5 - Views: 58

Illegal access Javascript error in Chrome

3 years ago - Reply: 1 - Views: 53

ng-repeat not updating in Chrome

3 years ago - Reply: 1 - Views: 82

Applying border to a checkbox in Chrome

4 years ago - Reply: 2 - Views: 119

open browser plugin using access vba

3 years ago - Reply: 1 - Views: 26

vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re