在 Angular 4/CLI 中使用 TypeScript 进行调试答案

【问题标题】：Debug in TypeScript in Angular 4/CLI在 Angular 4/CLI 中使用 TypeScript 进行调试
【发布时间】：2017-11-28 04:05:27
【问题描述】：

我在 Angular 4 CLI 环境中运行 Karma/Jasmine。遗憾的是，我的测试不允许我按照以下链接在 typescript 中进行调试：[https://angular.io/guide/testing#test-debugging][1]

我的项目由 Angular/CLI 设置并从 Angular2 升级到 4，并且在 Windows 10 计算机上。

【问题讨论】：

在源选项卡下的 chrome 开发者工具中检查是否有任何 webpack 文件夹？
是的，karma_webpack，包含 4 个捆绑的 javascript 文件。
你正在使用 ng serve 运行应用程序吗？
是的，我正在使用 ng serve 和 ng test 运行应用程序乙>。普通 CLI 配置。
请参考这个答案：stackoverflow.com/a/51443584/6923507

标签： angular typescript karma-jasmine angular-cli

【解决方案1】：

我有一个简单的 angular\cli 项目。最初使用 @angular/cli 1.0.2 创建了项目。当我运行“npm run test”时，chrome 浏览器会启动并运行我的 jasmine 测试用例。在页面的最顶部是一个大的“DEBUG”按钮。单击此按钮启动第二页测试。如果您打开开发人员工具 (f12)，导航到源，那里有一个名为“webpack://”的文件夹。在 webpack 文件夹中有一个“.”文件夹。这是您的项目文件夹，您应该认出您的源代码。此时，您可以调试任何您想要的东西。即 .spec.ts 或 .ts 文件。只需设置断点并刷新页面即可。

我最近升级到 @angular/cli 1.1.3 时，我的 webpack 文件夹消失了。我无法找到使用此最新版本进行调试的位置。我想很可能有一个介于 1.0.2 和 1.1.3 之间的版本仍然有 webpack 文件夹，但我还没有找到它。我有其他所有东西的最新版本。即@angular 4.2.4.

所以在我弄清楚如何使用@angular/cli 1.1.3 进行调试之前，我将坚持使用@angular/cli 1.0.2

【讨论】：

如果您运行 npm test，它将运行 ng test。通过这种业力的实现，应用程序被捆绑在一起，这似乎是我的问题/问题的根源，而且您似乎也发现它是正确的。
我的ng环境如下：@angular/cli:1.1.2 node:6.11.0 os:win32 x64 @angular/core:4.2.3
自 1.1.2 #6824, github.com/angular/angular-cli/issues/6824 以来测试中断的源图
#6824 已作为重复项关闭，正确的线程是 Test source maps are not working #6737 [link]github.com/angular/angular-cli/issues/6737