Angularjs部署Unknown provider: aProvider <- a

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
====================

评论

1 楼 silentzone 2015-10-15  

吊爆·········