angularjs - "Unknown provider: aProvider <- a"如何找到原始提供商？

Question

当我加载 AngularJS 应用程序的缩小版(通过 UglifyJS)时，我在控制台中收到以下错误:

Unknown provider: aProvider <- a

现在，我意识到这是由于变量名修饰造成的。未损坏的版本工作得很好。然而，我确实想要使用变量名修改，因为它大大减少了 JS 输出文件的大小。

因此，我们使用 ngmin在我们的构建过程中，但它似乎没有解决这个问题，尽管它在过去为我们提供了很好的服务。

因此，为了调试此问题，我在 uglify grunt 任务中启用了源映射。它们生成得很好，Chrome会从服务器加载 map 。然而，我仍然收到同样无用的错误消息，尽管我的印象是我现在应该看到提供者的原始名称。

如何让 Chrome 使用源映射来告诉我哪个提供商存在问题，或者如何以其他方式找到提供商？

Answer 1

我仍然很想知道如何在源代码中找到导致此问题的位置，但我已经能够手动找到问题了。

在全局范围内声明了一个 Controller 函数，而不是在应用程序模块上使用 .controller() 调用。

所以有这样的事情:

function SomeController( $scope, i18n ) { /* ... */ }

这对于 AngularJS 来说效果很好，但是为了使其能够正确地处理重整，我必须将其更改为:

var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );

经过进一步的测试，我实际上发现了更多 Controller 的实例也导致了问题。这就是我如何手动找到所有这些资源的来源:

首先，我认为在uglify选项中启用输出美化相当重要。对于我们繁重的任务来说，这意味着:

options : {
    beautify : true,
    mangle   : true
}

然后我在 Chrome 中打开了项目网站，并打开了 DevTools。这会导致记录如下错误:

我们感兴趣的调用跟踪中的方法是我用箭头标记的方法。这是providerInjector in injector.js 。您需要在引发异常的地方放置一个断点:

当您现在重新运行应用程序时，将命中断点，您可以向上跳转调用堆栈。将会有来自invoke in injector.js的电话，可从“不正确的注入(inject) token ”字符串中识别出来:

locals 参数(在我的代码中被修改为 d)可以很好地了解源中的哪个对象存在问题:

对我们的源代码进行快速 grep 发现了 modalInstance 的许多实例，但是从那里开始，很容易在源代码中找到这个位置:

var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};

必须更改为:

var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];

如果变量不包含有用的信息，您还可以进一步跳转堆栈，并且您应该调用 invoke ，其中应该有其他提示:

防止这种情况再次发生

现在您希望已经找到了问题，我觉得我应该提到如何最好地避免将来再次发生这种情况。

显然，您可以使用inline array annotation任何地方，或(取决于您的喜好)$inject property annotation并且以后尽量不要忘记它。如果您这样做，请确保启用 strict dependency injection mode ，尽早发现这样的错误。

Watch out! In case you're using Angular Batarang, StrictDI might not work for you, as Angular Batarang injects unannotated code into yours (bad Batarang!).

或者你可以让 ng-annotate搞定此事。我强烈建议这样做，因为它消除了该领域许多潜在的错误，例如:

• 缺少 DI 注释
• DI 注释不完整
• DI 注释顺序错误

使注释保持最新状态简直是一件痛苦的事，如果可以自动完成，您就不必这样做。 ng-annotate 正是这样做的。

它应该可以很好地集成到您的构建过程中 grunt-ng-annotate和 gulp-ng-annotate .