AngularJS Minified Error:[$injector:unpr]

Posted on | Edited on |

今天在把 AngularJS 的 Code 放上 Production 環境時出現了一個問題：

點擊會連到https://docs.angularjs.org/error/$injector/unpr 文件描述$injector錯誤，直接展開看minified後的JS發現$scope被轉成a了, 因為minified會透過縮減變數名稱節省檔案大小！

Sample code (wrong) :

1
2
3
4
5
6
7
App.controller("MyCtrl", function ($scope) {  
    $scope.foo= "foo";  
});  

//After Minified：(可透過[線上minified網站](http://refresh-sf.com/)試試看)
App.controller("MyCtrl",function(o){o.foo="foo"});
//Cause Error: [$injector:unpr] https://errors.angularjs.org/1.2.26/$injector/unpr?.....

解決方法：在inject時明確指定inject的物件

1
2
3
4
5
6
7
App.controller("MyCtrl", ["$scope", function ($scope) {  
    $scope.foo= "foo";  
}]);

//After Minified：
App.controller("MyCtrl",["$scope",function(o){o.foo="foo"}]);
//No error