How to debug angular app using angular-cli webpack?
我以前使用[email protected]，现在我更新为angular-cli @ webpack beta.11。 经过大量自定义更改后，我开始使用它。
唯一的事情是，现在我无法使用webstorm和chrome调试器调试我的角度应用程序，因为我没有使用ng serve获得任何ts文件。 使用[email protected]，使用Jetbrains插件调试我的应用非常容易。
如何使用ng serve使用Webstorm和Chrome调试器调试我的角度应用程序？
如何使用angular / cli进行调试
新的angular / cli版本使用的webpack不会将ts文件编译到dist之前的本地目录中(直到beta 1.0.0-beta.10)。现在，它使用一些类似于内存的方法。
但是您可以在Chrome开发者工具的"来源"标签中找到ts文件。
(新)适用于angular/[email protected]和更高版本的解决方案
Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1
Notice: In this example I used port 5321 instead of 4200. Just use your port.
使用Chrome开发人员工具进行调试
运行ng serve(也在npm start中使用过)时，您可以在Chrome开发者工具部分中找到您的来源：" webpack：//"：
使用JetBrains IDE用angular / cli调试Angular 2 App
只需在Webstorm / PHPStorm中将运行/调试配置编辑为以下内容：
(旧)[email protected]的解决方案
使用Chrome开发人员工具进行调试
运行ng serve(也在npm start中使用过)时，您可以在Chrome开发者工具部分中找到您的来源：" webpack：//"：
使用JetBrains IDE用angular-cli @ webpack调试Angular 2 App
只需在Webstorm / PHPStorm中将运行/调试配置编辑为以下内容：将项目目录的远程URL路径设置为
webpack：/////Users/...FULL_PATH .. //在Mac OSX上
要么
webpack：/// C：/...FULL_PATH .. // Windows上的示例
Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes
after"webpack:"
您也可以通过访问http：// localhost：4200 / main.map并搜索任何" .ts"文件来检查您的路径。您可以轻松复制此文件的路径并将其粘贴到" IDE配置"对话框中。
编辑：也许您也需要映射添加" / src"到您的src文件夹的路径。谢谢@ born2net
玩得开心。
好的，它起作用了，
您需要同时映射root和src。
看这里：
希望它可以帮助某人，
让我补充一点，有时调试器会错过您的断点，因此请在断点之前添加alert('foo')或; debugger代码。
发射
将把jspm项目添加并融合到新的cli中
Angular 2厨房水槽：http://ng2.javascriptninja.io
和来源@ https://github.com/born2net/ng2Boilerplate
问候，
肖恩
2017年答案为：
如果您对此有疑问，请转到调试器中的"脚本"选项卡，然后尝试根据看到的内容对齐URL映射。
其他答案均无济于事，因为我的angular-cli版本以不同的方式映射了事物。
您可以使用Augury(这是Web浏览器的开发工具扩展)来调试角度应用程序。
这是您可以安装的链接：
https://augury.angular.io/
该工具在查看应用程序中的路由层次结构，模块和组件层次结构以及每个组件上的依赖注入概述时非常有用。
这是我的项目的注入图，它说明了我的上述解释：
请注意，使用IntelliJ时，上述解决方案不允许您在角度组件的html文件中设置断点。您只能在Chrome中执行此操作。我不明白为什么在IntelliJ中无法做到这一点。
最终帮助我的是在
另外，您不需要像通常建议的那样启用TS编译器。
- 苹果系统
- Angular-CLI 2.4.1
- WebStorm 2016.3