调试缩小的Angular JavaScript中的未知提供程序

1sbrub3j 于 2022-12-25 发布在 Java

关注(0)|答案(9)|浏览(114)

我很难确定我的Angular 应用程序中有多少方法会导致错误：
第一个月
只有当javascript被ASP.NET捆绑和缩小后才会发生这种情况。
我已确保所有控制器和任何其他DI使用小型化安全方法，即我的控制器/服务等使用方法：

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

我已经检查了我们应用程序中的每个JS文件--有很多......但没有发现任何违反这种注入依赖项方式的东西--尽管在某个地方肯定有一个......
是否有更好的方法来查明哪个方法可能导致此错误？
谢啦，谢啦

JavaScript

来源：https://stackoverflow.com/questions/23480591/debugging-unknown-provider-in-minified-angular-javascript

9条答案

按热度按时间

koaltpgm1#

对于那些谁是引导他们的angularjs应用程序。

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

不要忘记在非精简代码中进行调试，您应该能够很快地找出格式错误的依赖项注入。
格式错误的注入通常如下所示：

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

但应该更像这样

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

这在Angular 1.7.2中进行了测试

赞(0）回复(0）举报 2022-12-25

z9smfwbn2#

对于其他任何在这个问题上苦苦挣扎的人，我找到了一个更简单的解决方案，如果你拉开你的开发者控制台（在chrome上），在angular抛出错误的地方添加一个断点：

然后，在右边的堆栈跟踪中，点击你看到的第一个“invoke”，这会把你带到invoke函数，这里的第一个参数是angular试图注入的函数：

然后，我在代码中搜索了一个类似的函数（在本例中为grep "\.onload" -R public），发现了8个需要检查的地方。

赞(0）回复(0）举报 2022-12-25

ltqd579y3#

对于任何阅读这篇文章的人，使用Angular 1.3
现在可以像这样使用Angular的ng-strict-di检查：

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

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

赞(0）回复(0）举报 2022-12-25

b1uwtaje4#

我遇到了同样的问题，我找到了一个解决方案，可以帮助其余的。我的建议基本上是我在评论和文档中看到的。如果你使用的是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中有所有的东西，所以我需要做的唯一一件事就是在最后添加以下代码：

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

Angular 文档中的记录更好
希望能有所帮助祝你好运！

赞(0）回复(0）举报 2022-12-25

cgyqldqp5#

正如在评论中提到的，这些是我试图找到我的JS错误所采取的步骤。
如果有另一个更简单的解决方案，请随时张贴它，我可能会标记为接受。
尝试调试缩小的代码是一场噩梦。
我最终做的是直接从Chrome的检查器中复制我的小型javascript。
然后我把JS粘贴到http://www.jspretty.com/中-我试过http://jsbeautifier.org/，但发现他们的网站被这么大的JS代码冻结了。
一旦它是'pretty-fied'，我就在我的解决方案中创建了一个test.js文件，并将现在更容易阅读的代码粘贴到其中。
快速注解掉我的_layout中的@script标记，并添加一个指向test.js文件的链接，我已经准备好调试一个现在更容易阅读的Javascript块。
遍历调用堆栈仍然相当笨拙，尽管现在您可以看到实际的方法，这使它变得不那么不可能了。

赞(0）回复(0）举报 2022-12-25

r3i60tvu6#

帮助我解决这个问题的一些东西（终于！）实际上已经在angular文档中了！如果你在定义ng-app的地方添加ng-strict-di属性到你的代码中，angular将抛出一个严格的警告，这样你就可以更容易地看到在开发模式下发生了什么。我希望这是默认设置！
请参见ngApp文档底部的参数列表。
https://docs.angularjs.org/api/ng/directive/ngApp

赞(0）回复(0）举报 2022-12-25

ehxuflar7#

我的工作方式如下：
1)我有两个最小化和普通的测试规范html文件（单元测试
2)确保文件的捆绑顺序与普通规范文件的顺序相同（JS脚本参考）
3)确保显式声明所有依赖项（array或$inject声明请参见http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html）
当单元测试（最小化引用）文件上有错误时，我可以比较并确保文件的引用与工作文件一样处于正确的顺序。
希望能有所帮助。

赞(0）回复(0）举报 2022-12-25

zvms9eto8#

我也遇到过类似的问题，花了很多时间进行调查，发现是Chrome扩展Batarang注入了错误代码，而Angular中的错误看起来完全一样。很遗憾，很难找到到底是什么导致了这个问题。

赞(0）回复(0）举报 2022-12-25

piztneat9#

我也遇到过类似的问题，解决方案完全是ozkary第3点的答案，也就是确保显式声明所有依赖项，包括路由的"resolve"部分。
下面是我的代码。

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

赞(0）回复(0）举报 2022-12-25

我来回答

调试缩小的Angular JavaScript中的未知提供程序

9条答案

相关问题

热门标签

最新问答