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

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.