Javascript 如何修复角度缩小构建后的喷油器错误？

在发言之前，我读了一些关于它的文章​​建议，但仍会导致错误。请看简短的代码：

function IndexController($scope, $route, $routeParams, $location){
  $scope.sfv = project.version.name;
}
angular.module("TkwebMobile", ['ngRoute', 'ngCookies'])
  .controller('IndexController', ['$scope', '$route', '$routeParams', '$location', IndexController]);

只有这样，错误才会继续存在。我用grunt来表示“丑陋”，我还用“concat”来将代码统一到一个“lib”中。甚至我也在使用Angular文档中推荐的“注入”

Uncaught Error: [$injector:modulerr] Failed to instantiate module TkwebMobile due to:
Error: [$injector:unpr] Unknown provider: a

---

这是咕噜咕噜的问题吗？（咕噜咕噜咕噜）我也遇到过类似的问题。事实证明，我没有正确地识别和格式化控制器和服务等的依赖项。我相信我是通过查看缩小输出发现这一点的。（让我告诉你，这很艰难。）

基本上，我必须查看所有文件，并验证依赖项列表是否与我在控制器和服务中使用的内容匹配。这很奇怪，因为它在没有变化的情况下工作

下面是我必须做的一个例子：

原件：

angular.module('FootCtrl', []).controller('FooterController', function($scope) {
    $scope.footer = 'Copyright \u00A9 ' + new Date().getFullYear() + name;
});

固定的

angular.module('FootCtrl', []).controller('FooterController', ["$scope", function($scope) {
    $scope.footer = 'Copyright \u00A9 ' + new Date().getFullYear() + name;
}]);

也许要注意我使用单引号和双引号的地方

---

希望这能有所帮助。我不确定您是否有比显示的代码更多的代码-如果没有，我也不太确定。

这是由于您的缩小，特别是缩小和损坏变量名的选项

Angular根据参数的名称确定要注入函数的值。例如

angular.factory('MyFactory', function($location) {...});

…将导致angular查找名为

'$location'

的依赖项，然后使用作为参数传递的

$location

值调用函数

当您缩小javascript时，启用了一个名为mangle的选项，那么变量名就会被破坏。上一个函数将变成这个

angular.factory('MyFactory', function(a) {...});

Angular在源代码中不再具有正确的参数名称，因为

$location

现在是

a

。这节省了javascript的大小，但完全破坏了Angular的隐式依赖解析。您可以通过以下两种方法之一解决此问题

第一个是angular为您提供的功能

angular.factory('MyFactory', ['$location', function(a) {...}]);

在数组中提供参数的名称，数组的最后一个元素是将参数注入的函数。这样，无论您在代码中调用什么参数，minifier都不会更改字符串文字，因此Angular始终知道您想要什么

如果您不想失去不必使用数组表示法的便利性，另一种方法是关闭minifier上的mangle设置。这显然意味着你不会缩小到同样的程度，但是问问你自己，它是否真的值得那些额外的字节

中途之家是使用类似ngMin的东西，允许在代码中注释数组符号，然后继续缩小。这是世界上最好的imo，但增加了部署客户端js的复杂性

编辑

在grunt中关闭轧件行为的正确设置如下

uglify: {
  options: {
    report: 'min',
    mangle: false
  }
}

---

但Nganotate软件包可以避免这种情况。有关更多信息，请参阅。（ngAnnotate是接管ngMin的软件包）

我遇到了这个问题，我花了很多时间才弄清楚问题是什么，因为我尝试禁用了变量名称的混乱，使用$InjectArray，而不是仅仅将服务和提供者名称传递给函数定义，同时依赖于角度隐式依赖项注入，但问题仍然存在。事实证明，在我的一个使用IIFE的控制器中，结尾缺少分号。请看下面的代码

之前：

（功能（）{

})（）

由于自动插入分号，上面的代码在缩略之前可以正常工作，但在缩略之后会中断，因为没有分号会把事情搞砸。因此，修正后的结果如下所示

正确：

（功能（）{

})（）

这解决了我的问题。我希望这能帮助一些人

---

注意：我使用grunt useminPrepare、usemin、copy、uglify和Nganotate。

您是一直都会遇到这个错误，还是只是偶尔会遇到这个错误？像下面的答案中描述的那样使用依赖项注入，只需将函数（$someVar）替换为['$someVar'，函数（…）]提示：使用未缩小的angular.js来调试它，因为它比angular.min.js.yesp提供了更多关于错误的细节，所以saved my day=D非常感谢Hank you@lawrence