grunt 压缩代码后,部署发布出现下面的错误:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=aProvider%20%3C-%20a
at http://192.168.129.105/scripts/97d82a51.vendor.js:3073:20
at http://192.168.129.105/scripts/97d82a51.vendor.js:3837:19
at Object.c [as get] (http://192.168.129.105/scripts/97d82a51.vendor.js:3797:59)
at http://192.168.129.105/scripts/97d82a51.vendor.js:3839:23
at c (http://192.168.129.105/scripts/97d82a51.vendor.js:3797:59)
at d (http://192.168.129.105/scripts/97d82a51.vendor.js:3808:62)
at Object.e [as instantiate] (http://192.168.129.105/scripts/97d82a51.vendor.js:3814:96)
at http://192.168.129.105/scripts/97d82a51.vendor.js:4464:38
at http://192.168.129.105/scripts/97d82a51.vendor.js:8874:29
at k (http://192.168.129.105/scripts/97d82a51.vendor.js:5157:57)
错误原因: 压缩以后,没有告诉angular如何注入,因此angular无法进行动态注入
解决办法:
1.编写所有controller/service/xx的时候用数组注入(推荐这个方式)
angular.module('MainApp').directive('about', ['$rootScope',
function ($rootScope) {
}])
2.在写完controller/service/xx以后编写注入提示
AboutController.$inject = ['$scope'];
本文最
牛叉的地方来了:
光是知道如何解决这个错误是不够的,压缩代码以后,
我们需要知道哪里代码没有认真编写,从而造成了这个错误。
解决流程:
第一步 修改Grunt编译脚本Gruntfie.js,加入
uglify:{
options : {
beautify : true,
mangle : true //混淆变量名
}
},
让代码构建的时候混淆变量名,但是不破坏代码可读性
第二步 修改angular.js 找到function annotate(fn) 加入console.warn提示
function annotate(fn) {
var $inject,
fnText,
argDecl,
last;
if (typeof fn === 'function') {
if (!($inject = fn.$inject)) {
$inject = [];
if (fn.length) {
console.warn("此函数没有注入注解,将导致编译后运行错误:",fn);
这下编译以后再发布运行,除了能看到Unknown provider错误,还能马上看到哪里的代码出现了问题。
====================
Enjoy It!
====================
Tobato 2014-09-14
====================