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

open chrome Devtools >settings (gear icon on devtools screen) >preferences >select "Enable javascrpt Source map"

Answer 2

It seems like basic configuration of Angular CLI uses Webpack and all TypeScript files can be found in its src directory, thus allowing one to put a breakpoint without making use of debugger statement.

Answer 3

Introduction:

I'm the original poster and supplier of the answer posted on 2016-06-04.

I have recently discovered a simpler way to get this working. I am posting this as a second answer because my original answer still works, and some people might prefer it. However, I think the new way I'm about to describe is a little easier.

Solution Overview:

Basically, you can set up everything under the DeveloperTools->Settings->Workspace menu, instead of right-clicking on everything. The right-clicking of my original answer is essentially just another way to populate this workspace form.

1. You want to go into DeveloperTools->Settings dialog like so:

2. Then go to the Workspace section and proceed with either the Local Server Solution or Remote Server Solution described next.

Local Server Solution:

Here are some screen prints for when your server and browser are running on the same machine:

1. From the workspace dialog, add the 'src/client' directory of your project, and a mapping to '/'. Here's an example of what it should look like when the server ('ng serve') and the browser are on the same machine:

Remote Server Solution:

Here are some screen prints for when your server and browser are running different machines:

1. If your server is running on Linux, but your browser is running on a different machine, say windows, you can create a samba share on your linux and mount it as a drive on your windows.

From a windows command prompt (actually 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. Then set your workspace to look something like:

Conclusion:

Doing it this way retains the information across browser cyclings, so you should only need to do it once. Perhaps the person who posted on 2016-07-30, where he said it worked for him "out of the box", somehow had this workspace form already set up.

I now understand this to be a Chrome Developer Tools setup issue and has nothing to do with Angular2 or Angular2 CLI. It's just that people who use angular2 CLI need to do this workspace mapping because the source (.ts) files are not directly available in the runtime (dist) directory.

Answer 4

Not sure what the issue was but I did not encounter that. It worked right out of the box, no convoluted five-step process required.

The .ts files are not and should not be copied to the /dist folder. What is being copied are the .map files containing a reference back to your source folder. Chrome developer tools shows all the .ts files under its Sources tab -- orange folders.

I took no action other than to run "ng serve", browse to http://localhost:4200 and open developer tools. I can open one of the listed .ts files (they are listed in the orange folders), set breakpoints, etc.

Answer 5

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)