如何在角度缩小构建后修复注入器错误？ [英] How to fix injector error after Angular minification build?

问题描述

在发言之前，我读到它提出了建议，但仍然导致错误。查看简短代码：

Before speaking, I read about it made ​​recommendations but still causing error. Look the short code:

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

仅此而且错误仍然存​​在。我正在使用grunt来uglify，而且我也使用concat将代码统一在lib中。甚至我在Angular文档中推荐使用注入。

Only this and the error persists. I'm using grunt to "uglify", and I'm also using the "concat" to unite the codes in a "lib". Even I using "injection" recommended in the Angular documentation.

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

是吗grunt concat的问题？ （grunt-contrib-concat）

Is it problem of grunt concat? (grunt-contrib-concat)

推荐答案

这是由于你的缩小，特别是缩小和 mangle的选项你的变量名。

This is due to your minification, specifically options to minify and mangle your variable names.

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

Angular determines what value to inject into your functions from the name of the parameters. For example...

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

...将导致angular查找名为'$的依赖项location'然后使用作为参数传递的 $ location 值调用您的函数。

...will cause angular to look for whatever dependency is named '$location' and then call your function with the $location value passed as it's parameter.

当你缩小你的javascript时，如果启用了一个名为 mangle 的选项，则变量名称会被破坏。上一个函数将变成这个......

When you minify your javascript, with an option called mangle turned on, then the variable names get mangled. The previous function will turn into this...

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

Angular在源代码中不再具有正确的参数名称，因为 $ location 现在 a 。这节省了javascript的大小，但完全破坏了Angular的隐式依赖解析。您可以通过以下两种方式之一解决此问题。

Angular no longer has the correct parameter name in your source code, as $location is now a. This saves on size of your javascript but totally destroys Angular's implicit dependency resolution. You can solve this in one of two ways.

第一种是角度为您提供的功能。

The first is a feature that angular provides for you.

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

您提供数组中参数的名称，数组的最后一个元素是函数将参数注入。这样，你在代码中调用你的参数并不重要，并且minifier永远不会改变字符串文字，所以Angular总是知道你想要什么。

You provide the names of the parameters in an array, with the last element of the array being the function to inject the parameters into. This way, it doesn't matter what you call your parameters in the code, and the minifier will never change a string literal so Angular always knows what you're wanting.

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

The other way if you don't want to lose the convenience of not having to use the array notation is to turn off the mangle setting on your minifier. This obviously means you don't minify to the same degree, but ask yourself if it's really worth those extra bytes.

中途的房子是使用像ngMin这样的东西来允许将数组符号注释到代码中，然后继续缩小。这是两个世界上最好的imo，但增加了部署你的客户端js的复杂性。

A halfway house is to use something like ngMin, to allow annotation of the array notation into your code and then continue with the minification. This is the best of both world's imo, but increases the complexity of deploying your clientside js.

编辑

关闭grunt中的mangle行为的正确设置是...

The correct settings to turn off the mangle behaviour in grunt would be this...

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

但ngAnnotate包可以避免这种情况。有关详细信息，请参见此处。 （ngAnnotate是接管ngMin的包）

But the ngAnnotate package can avoid this. See here for more info. (ngAnnotate is the package that has taken over ngMin)

这篇关于如何在角度缩小构建后修复注入器错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！