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

Question

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

屏幕打印显示情况:

如果我选择它们,我可以看到.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文件的制作和驻留在DIST目录旁边的.js文件.

映射文件示例(部分):

{"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问题,还是一个打字稿问题.

当控制台说出"第52行中的错误"时,这真的很痛苦,但是我不能跳到那里并插入一个断点等等.

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

Answer 1

我能够让这个工作.您必须将角度CLI src文件夹添加到工作区,然后在其中一个.ts文件上"映射到网络资源".

注意:此示例假定客户端和服务器在同一台计算机上运行的情况.如果您遇到客户端在Windows机器上,但服务器在Linux上运行的情况,那么在客户端机器上,您必须将Linux服务器源目录挂载为Windows共享,然后指定类似的东西

\\192.168.1.134\myShare\myProject\src\client

作为工作区文件夹.

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

我拍摄了整个过程的屏幕截图,所以最简单的方法就是展示这些.

1. 选择位于dist目录下的ts文件之一(对应于ng服务所在的目录),然后选择"将文件夹添加到工作区":

2. 选择你的src/client文件夹:

3. 对允许开发工具访问src目录的后续提示说"允许":

4. 观察到src文件夹现在列在Dev Tools源下.您现在可以浏览所有ts文件(不仅仅是您添加的文件),但是在您"建立映射"之前,您设置的任何断点都不会生效:

5. 您可以启用映射,如下两个屏幕打印所示:

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

现在我可以在.ts文件中设置断点,并深入查看.ts源的错误消息.

基本技巧是您必须手动将源ts文件目录添加到Chrome,因为文件不在服务目录下.映射保持有效,直到您手动删除它(通过右键单击.ts文件并选择"删除网络映射")或直到您关闭浏览器(然而它将保留映射刷新)