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 i

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)