Question

我很难确定我的角度应用程序中有哪些方法会导致错误：

Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n

只有在javascript捆绑后才会发生这种情况。由ASP.Net缩小。

我确保所有控制器和任何其他DI都使用缩小安全方法，I.E我的控制器/服务等正在使用该方法：

appControllers.controller('myCtrl', ['$scope', function($scope){
        //......
}]);

我已经浏览了我们应用中的每个JS文件 - 有很多......并且找不到任何违反这种注入依赖关系的方式 - 尽管必须有一个...

有没有更好的方法来确定哪种方法可能导致此错误？

由于

Answer 1

对于任何正在努力解决这个问题的人，我找到了一个更简单的解决方案。如果您拉开开发人员控制台（在chrome上）并添加一个断点，其中angular会抛出错误：

angular throwing an error

然后，在右侧的堆栈跟踪中，单击您看到的第一个“调用”。这将带您进入invoke函数，其中第一个参数是angular试图注入的函数：

I was able to inspect the function

然后我在我的代码中搜索了一个看起来像那个的函数（在这种情况下为grep "\.onload" -R public），并找到了8个要检查的位置。

我希望这有帮助！

Answer 2

对于阅读此内容的任何人，使用Angular 1.3

您现在可以像这样使用Angular的ng-strict-di检查：

<div ng-app="some-angular-app" ng-strict-di>
  ...
</div>

如果您没有使用数组语法加载依赖项，这将为您提供相应的错误消息。

Answer 3

我遇到了同样的问题，我找到了一个对其他人有帮助的解决方案。我的建议基本上就是我在评论和文档中看到的内容。如果您使用的是Angular 1.3.0或更高版本，则可以使用：

<html ng-app="myApp" ng-strict-di>
   <body>
      I can add: {{ 1 + 2 }}.
      <script src="angular.js"></script>
    </body>
</html>

在我的情况下，我拥有app.js文件中的所有内容，所以我唯一需要做的就是找到我的DI问题，最后添加这个小代码：

angular.bootstrap(document, ['myApp'], {
  strictDi: true
});

Angular Docs

中记录得更好

我希望有所帮助。祝你好运！

Answer 4

正如评论中所提到的，这些是我尝试找到我的JS错误的步骤。

如果还有其他更简单的解决方案，请随时发布，我可以将其标记为已接受。

尝试调试缩小代码是一场噩梦。

我最终做的是直接从Chrome中的检查器复制我的缩小的javascript。

然后我将JS粘贴到http://www.jspretty.com/ - 我曾尝试http://jsbeautifier.org/但发现他们的网站冻结了如此庞大的JS代码。

一旦它“非常好”，我在我的解决方案中创建了一个test.js文件，并将现在更容易阅读的代码粘贴到其中。

快速注释掉我@script中的_layout标记并添加指向test.js文件的链接，我已准备好调试一个现在更容易阅读的Javascript块。

遍历调用堆栈仍然很尴尬，但是现在你可以看到实际的方法使它变得不那么不可能了。

Answer 5

帮我解决这个问题的东西（终于！）实际上已经在角度文档中了！如果您在代码中ng-strict-di添加ng-app属性，则angular会发出严格警告，以便您可以更轻松地查看开发模式中发生的情况。我希望那是默认的！

请参阅ngApp文档底部的参数列表。

https://docs.angularjs.org/api/ng/directive/ngApp

Answer 6

这对我有用的方法如下：

1）有两个测试规范html文件（单元测试）最小化和简单

2）确保文件的捆绑顺序与普通规范文件（JS脚本参考）的顺序相同

3）确保显式声明所有依赖项（数组或$ inject声明参见http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html）

当单元测试（miminized reference）文件出错时，我可以比较并确保文件的引用顺序与工作文件一致。

希望有所帮助。

Answer 7

我遇到了类似的问题，并花了很多时间进行调查，发现Chrome扩展 Batarang 正在注入错误的代码，Angular中的错误看起来完全相同。很遗憾，很难找到导致问题的原因。

Answer 8

我也有类似的问题。解决方案是 ozkary 第3点的答案，即确保明确声明所有依赖关系，包括“解决”路线的一部分。

以下是我的代码。

when('/contact/:id', {
      controller: 'contactCtrl',
      templateUrl: 'assets/partials/contact.html',
      resolve: {
         contact: ['ContactService', '$route', function(ContactService, $route) {
            return ContactService.getContactDetail($route.current.params.id);
         }]
      }
})

Answer 9

对于那些正在引导他们的angularjs应用程序的人。

angular.bootstrap(body, ['app'], { strictDi: true });

不要忘了在非最小代码中调试，您应该能够很快找出格式错误的依赖项注入。

格式错误的注入通常采用以下格式：

...
.run([ function(ServiceInjected){
...

但是应该看起来更像这样

...
.run(['ServiceInjected', function(ServiceInjected){
...

这已在angularjs 1.7.2中进行了测试

在缩小的角度javascript中调试未知提供程序

9 个答案: