使用 chrome Web 开发人员工具在 Angular 2 CLI 项目中未显示 Typescript 文件答案

【问题标题】：Typescript files not showing in Angular 2 CLI project using chrome web developer tools使用 chrome Web 开发人员工具在 Angular 2 CLI 项目中未显示 Typescript 文件
【发布时间】：2016-10-01 17:37:10
【问题描述】：

我使用 angular2 CLI (ember cli) 生成了一个打字稿项目。我正在使用 Chromium Web Developer 工具进行调试。我在开发者工具设置中选择了“启用 javascript 源映射”。我看到源视图中列出了 .js 文件和 .ts。但是，当我选择它们时，.ts（打字稿）文件显示为空，即它找不到它们。

显示情况的屏幕打印：

如果我选择它们，我可以看到 .js 文件的文本。

.ts 文件没有复制到 dist 目录中，这对我来说似乎是个问题，但我看到 examples elsewhere 显示了典型的 angular2 cli dist 结构，但它们没有.ts 文件。

“tsconfig.json”的相关部分显示我已启用源映射：

 1   "compileOnSave": false,                                                                            
  2   "compilerOptions": {                                                                               
  3     "declaration": false,                                                                            
  4     "emitDecoratorMetadata": true,                                                                   
  5     "experimentalDecorators": true,                                                                  
  6     "mapRoot": "",                                                                                   
  7     "module": "system",                                                                              
  8     "moduleResolution": "node",                                                                      
  9     "noEmitOnError": true,                                                                           
 10     "noImplicitAny": false,                                                                          
 11     "outDir": "../dist/",                                                                            
 12     "rootDir": ".",                                                                                  
 13     "sourceMap": true,                                                                               
 14     "sourceRoot": "/",                                                                               
 15     "target": "es5"                                                                                  
 16   },

js.map 文件是生成的，并驻留在 .js 文件旁边的 dist 目录中。

示例映射文件（部分）：

{"version":3,"file":"app.js","sourceRoot":"/","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAGA,mB

我试过了：
1) 将 .ts 文件从 src 复制到 dist。
2) 手动编辑 app.js.map 文件的各种尝试，例如 sourceRoot 和 sources。

不太清楚js.map文件中的“/”指的是什么：项目的src目录还是dist目录？如果我编辑 .js.map 文件，是否必须刷新浏览器才能继续使用它？

我认为基本问题是它在 src 目录中寻找 ts 文件，这超出了浏览器的范围（因为它位于“../src”）。

Chromium 将 ts 文件的路径显示为“http://localhost:4202/app/cpp-scenes.ts”。但是当我把 .ts 文件放在那里时，没有骰子。

我不知道这是 js 映射问题、Angular 2 问题、Angular2 CLI 问题还是 typescript 问题。

当控制台显示“blah.ts 中的第 52 行错误”时，这真的很痛苦，但我不能跳到那里并输入断点等。

有没有其他人幸运地在 Angular2 CLI 项目中使用源映射？

【问题讨论】：

标签： typescript angular angular-cli

【解决方案1】：

打开 chrome Devtools >settings（devtools 屏幕上的齿轮图标）>preferences >选择“Enable javascrpt Source map”

【讨论】：

【解决方案2】：

Angular CLI 的基本配置似乎使用了 Webpack，所有 TypeScript 文件都可以在其 src 目录中找到，因此可以在不使用调试器语句的情况下放置断点。

【讨论】：

【解决方案3】：

简介：

我是 2016-06-04 上发布的答案的原始发布者和提供者。

我最近发现了一种更简单的方法来完成这项工作。我将此作为第二个答案发布，因为我的原始答案仍然有效，有些人可能更喜欢它。但是，我认为我将要描述的新方式要容易一些。

解决方案概述：

基本上，您可以在 DeveloperTools->Settings->Workspace 菜单下设置所有内容，而不是右键单击所有内容。右键单击我的原始答案本质上只是填充此工作区表单的另一种方式。

您想像这样进入 DeveloperTools->设置对话框：

然后转到 Workspace 部分并继续执行接下来描述的本地服务器解决方案或远程服务器解决方案。

本地服务器解决方案：

以下是您的服务器和浏览器在同一台机器上运行时的一些屏幕打印：

从工作区对话框中，添加项目的“src/client”目录，以及到“/”的映射。以下是服务器（'ng serve'）和浏览器在同一台机器上时的示例：

远程服务器解决方案：

以下是您的服务器和浏览器运行不同机器时的一些屏幕打印：

如果您的服务器在 Linux 上运行，但您的浏览器在另一台机器上运行，例如 windows，您可以在 linux 上创建一个 samba 共享并将其作为驱动器安装在 windows 上。

从 windows 命令提示符（实际上是 git bash shell）：

>$ net view  
Server Name            Remark
-------------------------------------------------------------------------------  
\\VT-VIRTUAL      vt-virtual-machine server (Samba, Linux Min  
The command completed successfully.

>$ net use l: '\\vt-virtual\vtstuff'

然后将您的工作区设置为如下所示：

结论：

这样做可以在浏览器循环中保留信息，因此您应该只需要这样做一次。也许在 2016 年 7 月 30 日发布的那个人说它“开箱即用”对他有用，不知何故已经设置了这个工作区表格。

我现在明白这是一个 Chrome 开发者工具 设置问题，与 Angular2 或 Angular2 CLI 无关。只是使用 angular2 CLI 的人需要做这个工作空间映射，因为源（.ts）文件在运行时（dist）目录中不直接可用。

【讨论】：

【解决方案4】：

不确定是什么问题，但我没有遇到。它开箱即用，无需复杂的五步过程。

.ts 文件没有也不应该被复制到 /dist 文件夹中。正在复制的是 .map 文件，其中包含对您的源文件夹的引用。 Chrome 开发者工具在其 Sources 标签下显示所有 .ts 文件 - 橙色文件夹。

除了运行“ng serve”、浏览到http://localhost:4200 并打开开发者工具外，我没有采取任何行动。我可以打开列出的 .ts 文件之一（它们列在橙色文件夹中）、设置断点等。

【讨论】：

是的，这对我来说似乎也是如此。也许他们现在只是在最新版本的 chrome 中自动检测到它。

【解决方案5】：

我能够让它工作。您必须将 angular CLI src 文件夹添加到您的工作区，然后您的 .ts 文件之一具有“映射到网络资源”。

注意：此示例假设客户端和服务器是在同一台机器上运行。如果您有以下情况客户端在 Windows 机器上，但服务器在 linux 上运行，例如，然后在客户端机器上你必须mount the linux server source directory as a windows share 然后指定类似的东西
\\192.168.1.134\myShare\myProject\src\client
作为您的工作区文件夹。

我最近不得不这样做，虽然它有点复杂，但它基本上和本地案例一样工作

我截取了整个过程的屏幕截图，所以显示这些可能是最简单的。

选择位于 dist 目录下的 ts 文件之一（对应于 ng serve 提供服务的目录），然后选择“将文件夹添加到工作区” "：

选择您的 src/client 文件夹：
对随后的提示说“允许”，允许开发工具访问 src 目录：
观察 src 文件夹现在列在 Dev Tools 源下。您现在可以浏览所有 ts 文件（不仅仅是您添加的那个），但是您设置的任何断点都不会生效，直到您“建立映射”：
您可以启用映射，如下两个屏幕截图所示：

选择合适的映射并点击启用

现在我可以在 .ts 文件中设置断点，并深入了解 .ts 源的错误消息。

基本技巧是您必须手动将源 ts 文件目录添加到 Chrome，因为这些文件不在服务目录下。映射一直有效，直到您手动删除它（通过右键单击 .ts 文件并选择“删除网络映射”）或关闭浏览器（但它会在刷新时保留映射）

【讨论】：