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

Question

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

显示情况的屏幕打印：

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

.ts 文件没有复制到 dist 目录中，这对我来说似乎是个问题，但我在其他地方看到了显示典型 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 问题还是打字稿问题。

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

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

Answer 1

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

注意：此示例假设客户端和服务器在同一台机器上运行。如果您遇到客户端在 Windows 机器上，但服务器在 linux 上运行的情况，那么在客户端机器上，您必须将 linux 服务器源目录挂载为 windows 共享，然后指定类似

\\192.168.1.134\myShare\myProject\src\client

作为您的工作区文件夹。

我最近不得不这样做，虽然它有点复杂，但它基本上与本地案例相同

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

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

2. 选择您的 src/client 文件夹：

3. 对随后的提示说“允许”，允许开发工具访问 src 目录：

4. 观察 src 文件夹现在列在 Dev Tools 源下。您现在可以浏览所有 ts 文件（不仅仅是您添加的那个），但是您设置的任何断点都不会生效，直到您“建立映射”：

5. 您可以启用映射，如下两个屏幕截图所示：

选择适当的映射并单击它以启用

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

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

Answer 2

介绍：

我是2016-06-04上发布的答案的原始海报和供应商。

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

解决方案概述：

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

1. 你想像这样进入 DeveloperTools->Settings 对话框：

2. 然后转到工作区部分并继续使用接下来描述的本地服务器解决方案或远程服务器解决方案。

本地服务器解决方案：

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

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

远程服务器解决方案：

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

1. 如果您的服务器在 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'

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

结论：

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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