如何使用angular-cli webpackdebuggingangular2应用程序？
我以前使用angular-cli@1.0.0-beta.10，现在我更新到angular-cli @ webpack beta.11。 经过很多自定义更改，我得到它的工作。
唯一的是，现在我无法使用webstorm和chromedebugging器来debugging我的angular 2应用程序，因为我没有使用ng serve获取任何ts文件。 使用angular-cli@1.0.0-beta.10，使用Jetbrains插件debugging我的应用程序非常简单。
如何使用ng服务debugging我的angular 2应用程序Webstorm和Chromedebugging器？
如何使用angular / cli进行debugging
新的angular / cli版本使用webpack，它不会像dist之前那样将ts文件编译到本地目录（直到beta 1.0.0-beta.10）。 现在它使用一些像内存一样的方法。
但是你可以在“Sources”选项卡中findChrome开发者工具中的ts文件。
（新）解决schemeangular/cli@1.0.0-beta.26和更新
注意：该解决scheme已经在版本1.0.0-beta.26和1.2.1中进行了testing
注意：在这个例子中，我使用了端口5321而不是4200.只需使用你的端口即可。
使用Chrome开发人员工具进行debugging
在运行ng服务（也用于npm start）时，您可以在Chrome开发人员工具部分find您的源代码：“webpack：//”：
使用JetBrains IDE使用angular / cli来debuggingAngular 2应用程序
只需在Webstorm / PHPStorm中将您的运行/debuggingconfiguration编辑为以下内容：
- 将您的项目目录的远程URLpath设置为
webpack://. - 将您的src目录的远程URLpath设置为
webpack://./src
（旧）解决schemeangular-cli@1.0.0-beta.10 – .14
使用Chrome开发人员工具进行debugging
在运行ng服务（也用于npm start）时，您可以在Chrome开发人员工具部分find您的源代码：“webpack：//”：
使用JetBrains IDE使用angular-cli @ webpackdebuggingAngular 2应用程序
只需在Webstorm / PHPStorm中将您的运行/debuggingconfiguration编辑为以下内容：将您的项目目录的远程URLpath设置为
webpack：////Users/…FULL_PATH .. //在Mac OSX上
要么
webpack：/// C：/…FULL_PATH .. //在Windows上的示例
注意：在Windows上你只需要3个斜杠，在Mac上你需要在“webpack”之后有4个斜杠。
您也可以通过访问http：// localhost：4200 / main.map并search任何“.ts”文件来检查path。 您可以轻松地复制该文件的path并将其粘贴到IDEconfiguration对话框中。
编辑 ：也许你需要映射的path添加“/ src”到你的src文件夹了。 谢谢@ born2net
玩的开心。
确定它工作，你需要映射根和src。 看这里：
希望它可以帮助某人，
让我补充说，有时候debugging器会错过你的断点，所以在断点之前加上alert（'foo'）或者debugging器代码。
TX
将添加和收敛jspm项目到新的cli Angular 2厨房水槽： http ://ng2.javascriptninja.io和来源@ https://github.com/born2net/ng2Boilerplate关心，;
肖恩
2017回答： angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
如果您遇到问题，请转到debugging器中的“ 脚本”选项卡 ，根据您所看到的内容尝试调整URL映射。
没有其他的答案帮助我，因为我的版本的angular度cli映射的东西不同的方式。 
最后帮助我的是在webpack:///之后添加一个额外的/ （正斜杠），以便有4个而不是3个。默认情况下有3个正斜杠
remote URL指向与webpack://// schema不同的左侧相同的父目录。
你也不需要像经常build议的那样启用TS编译器。
- 苹果系统
- Angular-CLI 2.4.1
- WebStorm 2016.3
