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

你可能感兴趣的:(JavaScript,AngularJS)