在缩小的角度 javascript 中调试未知的提供程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23480591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debugging Unknown provider in minified angular javascript
提问by Darren Wainwright
I'm having a hard time trying to pinpoint which, of the very many, methods I have in my angular app that would be causing the error:
我很难确定我的 angular 应用程序中的哪些方法会导致错误：
Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n
Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n
This only happens once the javascript has been bundled & minified by ASP.Net.
这只发生在 JavaScript 被 ASP.Net 捆绑和缩小后。
I have ensured that all the controllers, and any other DI, is using the minification-safe method, I.E My controllers/service etc are using the method:
我已确保所有控制器和任何其他 DI 都使用缩小安全方法，IE 我的控制器/服务等正在使用该方法：
appControllers.controller('myCtrl', ['$scope', function($scope){
//......
}]);
I've gone through every JS file in our app - there are a lot... and can't find anything that violates this way of injecting dependencies - though there must be one somewhere...
我已经浏览了我们应用程序中的每个 JS 文件 - 有很多......并且找不到任何违反这种注入依赖项方式的东西 - 尽管某处必须有一个......
Is there a better way to pinpoint which method could be causing this error?
有没有更好的方法来查明哪种方法可能导致此错误？
Thanks
谢谢
采纳答案by Darren Wainwright
As mentioned in the comments, These are the steps I took to try and find my JS error.
正如评论中提到的，这些是我尝试找到我的 JS 错误所采取的步骤。
If there is another, easier, solution, please feel free to post it and I may mark it as accepted.
如果有其他更简单的解决方案，请随时发布，我可能会将其标记为已接受。
Trying to debug minified code is a nightmare.
试图调试缩小的代码是一场噩梦。
What I eventually did was copy my minified javascript, directly from the inspector in Chrome.
我最终做的是直接从 Chrome 中的检查器复制我缩小的 javascript。
I then pasted the JS into http://www.jspretty.com/- I had tried http://jsbeautifier.org/but found their site froze with such large JS code.
然后我将 JS 粘贴到http://www.jspretty.com/- 我曾尝试过http://jsbeautifier.org/但发现他们的网站被如此大的 JS 代码冻结了。
Once it was 'pretty-fied' I created a test.js file in my solution and pasted the, now easier to read code, into it.
一旦它变得“漂亮”，我就在我的解决方案中创建了一个 test.js 文件，并将现在更易于阅读的代码粘贴到其中。
Quick step to comment out the @scripttag in my _layoutand add a link to the test.js file and I was ready to debug a now, far easier to read, chunk of Javascript.
@script在 my 中注释掉标记_layout并添加指向 test.js 文件的链接的快速步骤，我准备调试一个现在更容易阅读的 Javascript 块。
It is still pretty awkward to traverse the call stack, though now you can see actual methods it makes it far less impossible.
遍历调用堆栈仍然很尴尬，尽管现在您可以看到实际的方法，这使它变得不那么不可能。
回答by yourdeveloperfriend
For anyone else struggling with this problem, I found an easier solution. If you pull open your developer console (on chrome) and add a breakpoint where angular throws the error:
对于其他在这个问题上苦苦挣扎的人，我找到了一个更简单的解决方案。如果你拉开你的开发者控制台（在 chrome 上）并在 angular 抛出错误的地方添加一个断点：
Then, on the stack trace on the right, click on the first "invoke" you see. This will take you to the invoke function, where the first parameter is the function angular is trying to inject:
然后，在右侧的堆栈跟踪上，单击您看到的第一个“调用”。这将带您进入调用函数，其中第一个参数是 angular 尝试注入的函数：
I then did a search through my code for a function that looked like that one (in this case grep "\.onload" -R public), and found 8 places to check.
然后我在我的代码中搜索了一个看起来像那个函数的函数（在本例中grep "\.onload" -R public），并找到了 8 个要检查的地方。
I hope this helps!
我希望这有帮助！
回答by Max Schulze
For anybody reading this, using Angular 1.3
对于任何阅读本文的人，请使用 Angular 1.3
You can now use Angular's ng-strict-di check like this:
您现在可以像这样使用 Angular 的 ng-strict-di 检查：
<div ng-app="some-angular-app" ng-strict-di>
...
</div>
This will give you an appropriate error message if you didn't load your dependencies using the array syntax.
如果您没有使用数组语法加载依赖项，这将为您提供适当的错误消息。
回答by Jesús Sobrino
I had the same problem and I found a solution that could be helpful for the rest. What I propose is basically what I saw in the comments and docs. If you are using Angular 1.3.0 or above, you can use this:
我遇到了同样的问题，我找到了一个可能对其他人有帮助的解决方案。我的建议基本上是我在评论和文档中看到的。如果你使用的是 Angular 1.3.0 或更高版本，你可以使用这个：
<html ng-app="myApp" ng-strict-di>
<body>
I can add: {{ 1 + 2 }}.
<script src="angular.js"></script>
</body>
</html>
In my case, I have everything within a file app.js so the only thing I need to do for finding my DI problems is to add this little code at the end:
就我而言，我在文件 app.js 中拥有所有内容，因此我需要做的唯一一件事就是在最后添加这个小代码：
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
It's better documented in Angular Docs
它在Angular Docs 中有更好的记录
I hope that helps. Good luck!
我希望这有帮助。祝你好运！
回答by Whitelancer
Something that helped me solve this (finally!) was actually already in the angular docs! If you add the ng-strict-diattribute to your code wherever you define your ng-app, angular will throw a strict warning so you can more easily see what's going on in development mode. I wish that was the default!
帮助我解决这个问题的东西（终于！）实际上已经在 angular 文档中了！如果您在ng-strict-di代码中定义的任何地方添加该属性ng-app，angular 将发出严格警告，以便您可以更轻松地查看开发模式下发生的情况。我希望这是默认设置！
See the argument list at the bottom of the ngApp docs.
请参阅 ngApp 文档底部的参数列表。
回答by Ilya Chernomordik
I had the similar issue and used lots of time to investigate and figured out it was the Chrome extension Batarangthat was injecting the bad code and error in Angular looked exactly the same. It's really a pity it's so hard to find what exactly is causing the problem.
我遇到了类似的问题，并花了很多时间调查并发现是 Chrome 扩展程序Batarang注入了错误代码，而 Angular 中的错误看起来完全一样。真的很遗憾，很难找到究竟是什么导致了问题。
回答by Ajang R
I had the similiar issue too. The solution is exacly the answer from ozkarypoint 3, that is to make sure to explicitly declare all dependencies including "resolve" part of your route.
我也有类似的问题。解决方案正是ozkary第 3 点的答案，即确保明确声明所有依赖项，包括路线的“解析”部分。
Below is my code.
下面是我的代码。
when('/contact/:id', {
controller: 'contactCtrl',
templateUrl: 'assets/partials/contact.html',
resolve: {
contact: ['ContactService', '$route', function(ContactService, $route) {
return ContactService.getContactDetail($route.current.params.id);
}]
}
})回答by Mark Odey
For those who's bootstrapping their angularjs app.
对于那些正在引导他们的 angularjs 应用程序的人。
angular.bootstrap(body, ['app'], { strictDi: true });
Don't forget to debug in non minified code and you should be able to figure out pretty quickly the malformed dependency injection.
不要忘记在非缩小代码中进行调试，您应该能够很快找出格式错误的依赖注入。
The malformed injection is usually formatted like this :
格式错误的注入通常格式如下：
...
.run([ function(ServiceInjected){
...
But should look more like this
但应该看起来更像这样
...
.run(['ServiceInjected', function(ServiceInjected){
...
This is tested in angularjs 1.7.2
这是在 angularjs 1.7.2 中测试的
回答by ozkary
The way this works for me is the following:
这对我有用的方式如下：
1) have two test specification html files (unit test) minimized and plain
1) 有两个测试规范 html 文件（单元测试）最小化和简单
2) make sure the bundling of the files are in the same order as the plain spec file (JS script reference)
2) 确保文件的打包顺序与普通规范文件的顺序相同（JS 脚本参考）
3) make sure to explicitly declare all dependencies (array or $inject declares see http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html)
3）确保明确声明所有依赖项（数组或 $inject 声明见http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html）
When there is a mistake on the unit test (miminized reference) file, I can compare and make sure the reference of the files is in the correct order as the working file.
当单元测试（最小化参考）文件出现错误时，我可以比较并确保文件的参考与工作文件的顺序正确。
hope that help.
希望有所帮助。
