Typescript files not showing in Angular 2 CLI project using chrome web developer tools

Question

I have generated a typescript project using angular2 CLI (ember cli). I am using Chromium Web Developer tools to debug. I have "enable javascript source maps" selected in the Developers Tools settings. I see .js files and .ts listed in the sources view. However, the .ts (typescript) files show as empty when I select them i.e like it can't find them.

Screen Print showing the situation:

I can see the text of the .js files if I select them.

The .ts files are not copied into the dist directory, and this seems like a problem to me, but I've seen examples elsewhere showing typical angular2 cli dist structures and they do not have .ts files either.

Relevant portion of my "tsconfig.json" showing I have source mapping enabled:

 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 files are produced and reside in the dist directory next to the .js files.

Example mapping file (portion):

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

I've tried:
1) copying the .ts files from src into dist.
2) various attempts at editing the app.js.map file manually e.g sourceRoot and sources.

It's not quite clear what "/" is referring to in the js.map file: the project's src dir or the dist dir? If I edit a .js.map file do I have to refresh my browser to pick up on it?

I think the basic problem is it's looking for the ts files in the src dir, and this is outside the reach of the browser (since it's located at "../src").

Chromium shows the path for the ts file as "http://localhost:4202/app/cpp-scenes.ts". But when I put the .ts file there, no dice.

I don't know if this is a js mapping problem, an Angular 2 problem, an Angular2 CLI problem, or a typescript problem.

It's just a real pain when the console says "error in line 52 in blah.ts", but I can't jump there and put in a breakpoint etc.

Has anyone else had any luck getting source mapping working in an Angular2 CLI project?

Answer 1

I was able to get this to work. You have to to add the angular CLI src folder to your workspace, and then you have "map to network resource" on one of your .ts files.

Note: this example assumes the case where the client and server are running on the same machine. If you have the situation where the client is on a windows machine, but the server is running on linux for example, then on the client machine you have to mount the linux server source directory as a windows share and then specify something like

\\192.168.1.134\myShare\myProject\src\client

as your workspace folder.

I recently had to do this, and while it's a little more complicated, it fundamentally works the same as the local case

I took screen shots of the entire process, so it's probably easiest just to show these.

1. Select one of the ts files that resides under your dist directory (that corresponds to the directory that ng serve is serving from), and select "Add folder to workspace":

2. Select your src/client folder:

3. Say "Allow" to the subsequent prompt allowing dev tools to access the src dir:

4. Observe that the src folder is now listed under Dev Tools sources. You can now browse all the ts files (not just the one you added), but any breakpoints you set won't take effect until you "establish a mapping":

5. You can enable the mapping as shown in the next two screen prints:

Select the appropriate mapping and click on it to enable

Now I can set a breakpoint in the .ts file and drill down on error messages to the .ts source.

The basic trick is the you have to add the source ts file directory to Chrome manually, since the files are not under the serving directory. The mapping stays in effect until you either manually remove it (by right-clicking on a .ts file and selecting "remove network mapping") or until you close the browser (it will retain the mapping on refreshes however)