如何使用 angular-cli webpack 调试 angular 应用程序？
How to debug angular app using angular-cli webpack?
之前用的是angular-cli@1.0.0-beta.10，现在更新到angular-cli@webpack beta.11。经过大量自定义更改后，我开始工作了。
唯一的问题是现在我无法使用 webstorm 和 chrome 调试器调试我的 angular 应用程序，因为我没有使用 ng serve 获得任何 ts 文件。使用 angular-cli@1.0.0-beta.10，使用 Jetbrains 插件调试我的应用程序非常容易。
如何使用 Webstorm 调试我的 angular 应用程序和使用 ng serve 的 Chrome 调试器？
如何使用 angular/cli
进行调试
新的angular/cli版本使用webpack，它不会像以前的dist那样将ts文件编译到本地目录（直到beta 1.0.0-beta.10）。现在它使用一些类似内存的方法。
但是您可以在 "Sources" 选项卡的 Chrome 开发人员工具中找到 ts 文件。
(new) angular/cli@1.0.0-beta.26 和更高版本
的解决方案
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 angular/cli 调试 Angular 2 个应用 IDE
只需将 Webstorm/PHPStorm 中的 Run/Debug 配置编辑为以下内容：
- 将项目目录的远程 URL 路径设置为
webpack://.
- 将你的远程 URL 源目录路径设置为
webpack://./src
（旧）解决方案 angular-cli@1.0.0-beta.10 - .14
使用 Chrome 开发人员工具进行调试
虽然 运行 ng serve（也用于 npm start），您可以在 Chrome 开发人员工具部分找到您的源代码："webpack://":
使用 JetBrains angular-cli@webpack 调试 Angular 2 个应用 IDE
只需将 Webstorm/PHPStorm 中的 Run/Debug 配置编辑为以下内容：将项目目录的远程 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。
看这里：
希望对大家有所帮助，
让我补充一点，有时调试器会错过您的断点，因此请在断点之前添加警报（'foo'）或；调试器代码。
发送
将向新的 cli 添加和转换 jspm 项目
Angular 2 个厨房水槽：http://ng2.javascriptninja.io
和 source@ https://github.com/born2net/ng2Boilerplate
此致，
肖恩
最终帮助我的是在 webpack:/// 之后添加一个额外的 /（正斜杠），这样就有 4 个而不是 3 个。默认情况下有 3 个正斜杠
remote URL 指向与左侧相同的父目录，但 webpack://// 模式除外。
另外，您也不需要像通常建议的那样启用 TS 编译器。
- MacOS
- Angular-CLI 2.4.1
- WebStorm 2016.3
2017 年回答：
angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
如果您遇到问题，请转到调试器中的 脚本选项卡 并尝试根据您看到的内容对齐 URL 映射。
None 的其他答案帮助了我，因为我的 angular-cli 版本以不同的方式映射了事物。
您可以使用 Augury 来调试 angular 应用程序。
这是您可以安装的link：
此工具对于查看应用程序中路由的层次结构、模块和组件层次结构以及每个组件的依赖注入概述非常有用。
这是我的项目的注入图，它说明了我的上述解释：
请注意，使用 IntelliJ 时，上述解决方案不允许您在 angular 组件的 html 文件中设置断点。您只能在 Chrome 中执行此操作。我不明白为什么这在 IntelliJ 中是不可能的。
之前用的是angular-cli@1.0.0-beta.10，现在更新到angular-cli@webpack beta.11。经过大量自定义更改后，我开始工作了。
唯一的问题是现在我无法使用 webstorm 和 chrome 调试器调试我的 angular 应用程序，因为我没有使用 ng serve 获得任何 ts 文件。使用 angular-cli@1.0.0-beta.10，使用 Jetbrains 插件调试我的应用程序非常容易。
如何使用 Webstorm 调试我的 angular 应用程序和使用 ng serve 的 Chrome 调试器？
如何使用 angular/cli
进行调试新的angular/cli版本使用webpack，它不会像以前的dist那样将ts文件编译到本地目录（直到beta 1.0.0-beta.10）。现在它使用一些类似内存的方法。
但是您可以在 "Sources" 选项卡的 Chrome 开发人员工具中找到 ts 文件。
(new) angular/cli@1.0.0-beta.26 和更高版本
的解决方案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 angular/cli 调试 Angular 2 个应用 IDE
只需将 Webstorm/PHPStorm 中的 Run/Debug 配置编辑为以下内容：
- 将项目目录的远程 URL 路径设置为
webpack://. - 将你的远程 URL 源目录路径设置为
webpack://./src
（旧）解决方案 angular-cli@1.0.0-beta.10 - .14
使用 Chrome 开发人员工具进行调试
虽然 运行 ng serve（也用于 npm start），您可以在 Chrome 开发人员工具部分找到您的源代码："webpack://":
使用 JetBrains angular-cli@webpack 调试 Angular 2 个应用 IDE
只需将 Webstorm/PHPStorm 中的 Run/Debug 配置编辑为以下内容：将项目目录的远程 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。 看这里：
希望对大家有所帮助，
让我补充一点，有时调试器会错过您的断点，因此请在断点之前添加警报（'foo'）或；调试器代码。
发送
将向新的 cli 添加和转换 jspm 项目 Angular 2 个厨房水槽：http://ng2.javascriptninja.io 和 source@ https://github.com/born2net/ng2Boilerplate 此致，
肖恩
最终帮助我的是在 webpack:/// 之后添加一个额外的 /（正斜杠），这样就有 4 个而不是 3 个。默认情况下有 3 个正斜杠
remote URL 指向与左侧相同的父目录，但 webpack://// 模式除外。
另外，您也不需要像通常建议的那样启用 TS 编译器。
- MacOS
- Angular-CLI 2.4.1
- WebStorm 2016.3
2017 年回答：
angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
如果您遇到问题，请转到调试器中的 脚本选项卡 并尝试根据您看到的内容对齐 URL 映射。
None 的其他答案帮助了我，因为我的 angular-cli 版本以不同的方式映射了事物。
您可以使用 Augury 来调试 angular 应用程序。
这是您可以安装的link：
此工具对于查看应用程序中路由的层次结构、模块和组件层次结构以及每个组件的依赖注入概述非常有用。
这是我的项目的注入图，它说明了我的上述解释：
请注意，使用 IntelliJ 时，上述解决方案不允许您在 angular 组件的 html 文件中设置断点。您只能在 Chrome 中执行此操作。我不明白为什么这在 IntelliJ 中是不可能的。