如何使用angular-cli在Angular2中调试应用程序? [英] How to debug an application in Angular2 using angular-cli?

问题描述

有人知道是否可以在WebStorm中使用命令行ng serve使用angular-cli调试应用程序吗?我尝试了此网址中发布的解决方案:

Does anyone know if it's possible to debug an application using angular-cli with the command line ng serve in WebStorm?. I tried the solution posted in this url:

如何使用angular- cli webpack?

但是它对我不起作用，我决定做出一个新的答案，因为angular-cli没有一些工具可以做到这一点有点奇怪.

But it didn't work for me and I decided to make a new answer, because it's a little weird that angular-cli doesn't have some tools to do this.

推荐答案

这是我使用Angular-cli(1.0.0-beta.21)构建的Angular2(2.3)项目的运行配置

Here is my run configuration for Angular2 (2.3) project built with angular-cli (1.0.0-beta.21)

一些要检查的东西:

启动调试器并加载应用程序后，您的断点中是否显示选中标记?

Do you have checkmarks shown in your breakpoints once the debugger is started and application loaded?

如果没有，则似乎由于某种原因未加载源地图.检查映射是否正确:在浏览器中打开http://localhost:4200/main.bundle.map，查看"sources":中的URL是什么样的.如果您看到类似的东西

if not, seems sourcemaps are not loaded for some reason. Check if the mappings are correct: open http://localhost:4200/main.bundle.map in browser, see what URLs in "sources": look like. If you see smth like

"webpack:////User/devuser/Develop/MyWebApp/src/app/index.ts"

那么根的URL映射将是

then URL mappings for root would be

webpack:////User/devuser/Develop/MyWebApp

如果看到使用了相对路径，请相应地更改URL映射.

If you see that the relative paths are used, change URL mappings accordingly.

如果最终您可以看到选中标记，请尝试刷新浏览器页面(重要!!! )-是否遇到断点?

If finally you can see the checkmarks, try refreshing browser page (important!!!) - are any of breakpoints hit?

如果您设法加载了源地图(您可以看到选中标记，则在浏览器刷新时至少会遇到一些断点)-您已完成:) WebStorm配置现在正确

If you manage to get sourcemaps loaded (you can see checkmarks, at least some breakpoints are hit on browser refresh) - you are done:) Your WebStorm configuration is now correct

这篇关于如何使用angular-cli在Angular2中调试应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！