如何使用angular-cli在Angular2中调试应用程序？

Question

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

How to debug angular 2 app using angular-cli webpack?

但它对我没有用，我决定做一个新答案，因为angular-cli没有一些工具可以做到这一点有点奇怪。

Answer 1

这是我使用angular-cli（1.0.0-beta.21）构建的Angular2（2.3）项目的运行配置

要检查的一些事项：

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

如果没有，似乎由于某种原因没有加载源图。检查映射是否正确：在浏览器中打开http://localhost:4200/main.bundle.map，查看"sources":中的哪些网址。如果你看到像

那样的smth

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

然后root的URL映射将是

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

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

如果最终你可以看到复选标记，请尝试刷新浏览器页面（重要!!! ） - 是否有任何断点？

如果你设法加载源图（你可以看到勾选标记，浏览器刷新时至少会遇到一些断点） - 你就完成了:)你的WebStorm配置现在是正确的

Answer 2

我终于开始工作了！我正在这里为自己和其他人提供文档以供将来使用。

注意：已通过Angular v6测试

步骤：

1. 安装JetBrains IDE支持Chrome扩展程序
2. 转到选项并设置端口 63342 （不是4200 ），如下所示：
3. 现在在Webstorm IDE中，运行>编辑配置。
4. 单击 + 按钮，选择 Javascript调试，然后如下图所示添加设置，然后单击“应用”按钮。
5. 转到“设置”>“构建，执行和部署”>“调试器”并进行如下设置：
6. 运行调试器（运行>调试）
7. 像在cmd / terminal中一样正常运行服务。
8. 在Chrome中运行http://localhost:4200/
9. 现在，您可以在webstorm IDE中设置断点并进行调试。