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

Answer 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 
    }]);

Answer 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.