I used [电子邮件受保护] /cdn-cgi/l/email-protection之前和现在我更新到 angular-cli@webpack beta.11。经过大量的自定义更改后，我让它工作了。

唯一的问题是，现在我无法使用 webstorm 和 chrome 调试器调试我的 Angular 应用程序，因为我没有使用 ngserve 获得任何 ts 文件。和[电子邮件受保护] /cdn-cgi/l/email-protection使用 Jetbrains 插件调试我的应用程序非常容易。

如何使用 Webstorm 和 Chrome 调试器使用 ngserve 调试我的 Angular 应用程序？

如何使用 Angular/CLI 进行调试

新的 angular/cli 版本使用 webpack，它不会像之前的 dist 那样将 ts 文件编译到本地目录（直到 beta 1.0.0-beta.10）。现在它使用一些类似记忆的方法。

但您可以在 Chrome 开发者工具的“源”选项卡中找到 ts 文件。

（新）角度/的解决方案[电子邮件受保护] /cdn-cgi/l/email-protection和较新的

注意：此解决方案已使用版本1.0.0-beta.26和1.2.1进行测试

注意：在此示例中，我使用端口 5321 而不是 4200。只需使用您的端口即可。

使用 Chrome 开发者工具进行调试

运行 ngserve（也在 npm start 中使用）时，您可以在 Chrome 开发者工具部分找到您的源代码：“webpack://”：

使用 JetBrains IDE 通过 angular/cli 调试 Angular 2 应用程序

只需将 Webstorm/PHPStorm 中的运行/调试配置编辑为以下内容：

1. 将项目目录的远程 URL 路径设置为webpack://.
2. 将 src 目录的远程 URL 路径设置为webpack://./src

（旧）解决方案[电子邮件受保护] /cdn-cgi/l/email-protection - .14

使用 Chrome 开发者工具进行调试

运行 ngserve（也在 npm start 中使用）时，您可以在 Chrome 开发者工具部分找到您的源代码：“webpack://”：

使用 JetBrains IDE 通过 angular-cli@webpack 调试 Angular 2 应用程序

只需将 Webstorm/PHPStorm 中的运行/调试配置编辑为以下内容：将项目目录的远程 URL 路径设置为

webpack:////Users/...FULL_PATH.. //在 Mac OSX 上

or

webpack:///C:/...FULL_PATH.. //Windows 上的示例

注意：在 Windows 上您只需要 3 个斜杠，在 Mac 上您需要 4 个斜杠 在“webpack：”之后

您还可以通过以下方式检查您的路径：http://localhost:4200/main.map http://localhost:4200/main.map并搜索任何“.ts”文件。您可以轻松复制该文件的路径并将其粘贴到 IDE 配置对话框中。

EDIT：也许您还需要将添加“/src”的路径映射到您的 src 文件夹。谢谢@born2net

玩得开心。