Javascript error Unknown provider: tProvider <- t after Rails minification Angularjs

Question

My Rails app doesn't work after turned on assets magnification when assets compiled. I converted the Angular controllers to use the bracket notation, and get following error, is there a way to debug this?

Compiled application.js https://gist.github.com/jianbo/6665161

JS ERROR

Error: Unknown provider: tProvider <- t
at Error (<anonymous>)
at me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:21665
at Object.i [as get] (me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:20671)
at me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:21753
at i (localme:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:20671)
at n (me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:20805)
at Object.r [as instantiate] (me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:21447)
at me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:818:604
at me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:28889
at r (me:3001/assets/application-4f6cd4e170fc6ce5d181d869af318557.js:817:8277) application-4f6cd4e170fc6ce5d181d869af318557.js:818
(anonymous function) application-4f6cd4e170fc6ce5d181d869af318557.js:818
(anonymous function) application-4f6cd4e170fc6ce5d181d869af318557.js:818
r.$broadcast application-4f6cd4e170fc6ce5d181d869af318557.js:818
(anonymous function) application-4f6cd4e170fc6ce5d181d869af318557.js:818
l application-4f6cd4e170fc6ce5d181d869af318557.js:818
l application-4f6cd4e170fc6ce5d181d869af318557.js:818
(anonymous function) application-4f6cd4e170fc6ce5d181d869af318557.js:818
r.$eval application-4f6cd4e170fc6ce5d181d869af318557.js:818
r.$digest application-4f6cd4e170fc6ce5d181d869af318557.js:818
r.$apply application-4f6cd4e170fc6ce5d181d869af318557.js:818
r application-4f6cd4e170fc6ce5d181d869af318557.js:818
m application-4f6cd4e170fc6ce5d181d869af318557.js:818
v.onreadystatechange application-4f6cd4e170fc6ce5d181d869af318557.js:818

Solution 1

This error itself is Angular saying that it doesn't know what to inject for 't'. Which means that 't' must be a minified name for one of your injections somewhere.

If it works before minification but not after then it has to be an issue with something somewhere not using the min-safe injection method.

I'd check to make sure everything you're doing is minsafe, and also that you are not trying to minify the non-minsafe version of angular.js itself. Always use the .min that comes in the angular package rather than minifying your own (or if you do want to minify your own make sure it's the minsafe version).

Here's an example of making a controller minsafe. The following is NOT minsafe:

angular
    .module('myModule')
    .controller('MyCtrl', function($scope, myService) { 
        //your non-minsafe controller 
    });

To make it minsafe we encapsulate the function call in an array which begins with the things we want to inject, and ends in the function call with the same order of arguments:

angular
    .module('myModule')
    .controller('MyCtrl', ['$scope', 'myService', function($scope, myService) { 
        //your minsafe controller 
    }]);

Solution 2

I have the same problem with the gem hiravgandhi/angularjs-rails

I was able to work OFF minifcation in production by changing my settings in config/environments/production.rb

config.assets.js_compressor = Uglifier.new(mangle: false)

Using a Rails 4.0.2 app with the hiravgandhi/angularjs-rails gem as instructed by the gem installation instructions.

Solution 3

I had a same problem and I found out that the problem was not in .controller call, it was in .config where it was not minification safe.

before

var app = angular.module('myModule', ['restangular']);

app.config(function(RestangularProvider) {
    RestangularProvider.setDefaultHeaders({'Content-Type': 'application/json'});
    RestangularProvider.setBaseUrl('http://myapi.com/api/v1');
});

After

var app = angular.module('myModule', ['restangular']);

app.config(['RestangularProvider', function(RestangularProvider) {
    RestangularProvider.setDefaultHeaders({'Content-Type': 'application/json'});
    RestangularProvider.setBaseUrl('http://myapi.com/api/v1');
}]);

Comments

[user1883793]

Hi Mike, I am using angularjs-rails gem which uses un-minifed angular.js github.com/hiravgandhi/angularjs-rails/blob/master/vendor/…, could this be the reason? I should overwrite this with angular.min.js? Looks like the error is in line 2997.. Thanks

[William Scott]

Check out the grunt-angular-templates plugin.

[mortalapeman]

@user1883793 There probably nothing wrong with the angular file. What Mike is saying is that angular's DI doesn't work with minification unless you use the second syntax he is describing. Angular literally parses the function header to determine what services to inject, and minification messes up those names.

[user1883793]

I have done what Mike said, and gone through my angular code several times, still cannot find the problem. Is there a better way to debug this? thanks

[Mike Driver]

Hi - did you make sure you're not minifying the angular.js file itself? If you are this could cause an issue such as the one you describe. You should use the angular.min.js that comes with the angular download package instead - and NOT minify that file.

[Ryan Angilly]

Doing what @mike said fixed my issue. Thank you!

[Mohd Anas]

I am using the same approach but still getting the same issue...What should I do now?

[tim_xyz]

Worked for me. Is this a recommended solution though, or its just able to cover up a mistake somewhere?

[Grant Birchmeier]

This answer saved my life today.

[Sohair Ahmad]

worked for me but yes this question is valid if this is hiding some other error or is it really a fix ?