当我加载经过UglifyJS压缩的AngularJS应用程序的最小化版本时，控制台会显示以下错误：
Unknown provider: aProvider <- a
现在，我意识到这是由于变量名混淆所导致的。未混淆版本可以正常工作。然而，我 确实 想要使用变量名混淆，因为它可以大幅减小我们的JS输出文件大小。
出于这个原因，我们在构建过程中使用ngmin，但它似乎无法解决这个问题，尽管它在过去为我们服务良好。
因此，为了调试此问题，我在我们的uglify grunt任务中启用了源代码映射。它们被很好地生成，并且Chrome 可以 从服务器加载映射。然而，我仍然收到相同的无用错误消息，尽管我认为现在应该看到提供程序的原始名称。
我如何让Chrome使用源代码映射告诉我哪个提供程序是有问题的，或者换句话说，我如何以其他方式找到提供程序？
我仍然想知道如何在我们的源代码中找到导致此问题的地方，但是我现在已经能够手动找到问题了。
全局作用域上声明了一个控制器函数，而不是在应用模块上使用.controller()调用。
因此类似于这样：
function SomeController( $scope, i18n ) { /* ... */ }
这对于AngularJS来说很好用，但为了让代码混淆后仍然能正常运行，我不得不将其修改为：
var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );
经过进一步的测试，我实际上发现了更多控制器引起问题的情况。这就是我手动找到它们的方法:
首先，我认为在uglify选项中启用输出美化非常重要。对于我们的grunt任务，这意味着:
options : {
beautify : true,
mangle : true
}
我随后在Chrome中打开了项目网站，并打开了DevTools。这导致类似下面这样的错误被记录：
我们感兴趣的调用堆栈中的方法是我标记的那个箭头所指向的，它是injector.js中的providerInjector。您需要在它抛出异常的地方设置断点:
现在重新运行应用程序时，将会触发断点，您可以跳转到调用堆栈的上方。其中有一个来自injector.js中的invoke的调用，可从“Incorrect injection token”字符串中识别出：
locals参数（在我的代码中转换为d）可以很好地指出源代码中的哪个对象存在问题：
在我们的源代码上执行快速的grep，找到许多modalInstance实例，但从那里开始，很容易就能找到源代码中的这个位置：
var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};
必须更改为：
var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];
如果变量没有包含有用信息，您还可以跳转到堆栈的更高层，这时您应该会遇到调用invoke的地方，它应该会提供额外的提示：
现在您已经找到了问题，我认为我应该提一下如何最好地避免将来再次出现这种情况。
显然，您可以在每个地方都使用内联数组注释，或者（根据您的喜好）$inject 属性注释，并尽量不要忘记。如果您这样做，请确保启用严格依赖项注入模式，以尽早捕获此类错误。
注意！如果您正在使用Angular Batarang，则StrictDI可能无法正常工作，因为Angular Batarang会将未注释的代码注入到您的代码中（坏Batarang！）。
或者您可以让ng-annotate来处理它。我强烈推荐这样做，因为它可以消除此区域中出现的大量潜在错误，例如：
保持注释更新只是一件麻烦事，如果可以自动完成，就没有必要这样做。ng-annotate正是如此。
它应该与grunt-ng-annotate和gulp-ng-annotate非常好地集成到您的构建过程中。
uglify({ output : { beautify : true }})的方法。 - Eugene Gluhotorenko<body ng-app="lacote" ng-strict-di>
Angular会告诉您问题出在哪里！修复并重新启用Uglify。 - PyWebDesignOliver Salzburg的写作非常棒。已点赞。
对于任何可能出现此错误的人，提示一下。我的问题仅仅是忘记为指令控制器传递一个数组：
return {
restrict: "E",
scope: {
},
controller: ExampleDirectiveController,
templateUrl: "template/url/here.html"
};
return {
restrict: "E",
scope: {
},
controller: ["$scope", ExampleDirectiveController],
templateUrl: "template/url/here.html"
};
/* @ngInject */。它似乎可以完成复杂的注入部分，而无需输入每个包含的模块（我正在使用 Yeoman）。 - Nicholas Blasgen如果您正在使用Angular 1.3，可以通过在ngApp中使用ngStrictDi指令来避免许多麻烦：
<html lang="en" ng-app="myUglifiablyGreatApp" ng-strict-di>
现在，在缩小化之前，任何不使用注释的东西都会使您的控制台崩溃，并且您可以看到该名字，而无需查找混乱的堆栈跟踪。
根据文档：
未使用显式函数注释（因此不适合缩小）的函数将无法调用
一个注意点，它仅检测是否存在注释，而不检测注释是否完整。
意思是：
['ThingOne', function(ThingA, ThingB) { … }]
不会捕捉到ThingB不是注释的一部分。
感谢ng-annotate团队提供此提示，强烈推荐在现在被弃用的ngMin之上使用它。
要缩小Angular的所有内容，你只需要将声明更改为“数组”声明“模式”，例如：
来自：
var demoApp= angular.module('demoApp', []);
demoApp.controller(function demoCtrl($scope) {
} );
致
var demoApp= angular.module('demoApp', []);
demoApp.controller(["$scope",function demoCtrl($scope) {
}]);
如何声明工厂服务？
demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {
return {
//some object
};
}]);
- "grunt-ngmin": "^0.0.3",
+ "grunt-ng-annotate": "^0.3.0",
运行npm install(然后可选地运行npm prune)，并在提交记录中跟踪更改以编辑Gruntfile.js。
../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js
SymbolDef.prototype = {
unmangleable: [...],
mangle: function(options) {
[...]
this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name;
[...]
}
};
现在错误更加明显了。
Error: [$injector:unpr] Unknown provider: a_orig_$stateProvider
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=a_orig_%24stateProvider
at eval (eval at <anonymous> (http://example.com/:64:17), <anonymous>:3155:20)
现在看来很明显了...
Gruntfile.js
uglify: {
example: {
options: {
beautify: true,
mangle: true
},
[...]
},
[...]
}
var numberOfVariables = 1;
SymbolDef.prototype = {
unmangleable: [...],
mangle: function(options) {
[...]
this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name+"_"+numberOfVariables++;
[...]
}
};
使用generator-gulp-angular：
/** @ngInject */
function SomeController($scope, myCoolService) {
}
另外不要忘记路由的resolve属性。它也必须定义为数组：
$routeProvider.when('/foo', {
resolve: {
bar: ['myService1', function(myService1) {
return myService1.getThis();
}],
baz: ['myService2', function(myService2) {
return myService2.getThat();
}]
}
});
uglify: {
compile: {
options: {
mangle : false,
...
},
}
}