title: Typescript files not showing in Angular 2 CLI project using chrome web developer tools
body: <p>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.  </p>
  
  <p>Screen Print showing the situation:</p>
  
  <p><a href="https://i.stack.imgur.com/XNwz5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XNwz5.png" alt="enter image description here"></a></p>
  
  <p>I <em>can</em> see the text of the .js files if I select them. </p>
  
  <p>The .ts files are <em>not</em> copied into the dist directory, and this seems like a problem to me, but I've seen <a href="http://www.mithunvp.com/build-angular-apps-using-angular-2-cli/" rel="noreferrer">examples elsewhere</a> showing typical angular2 cli dist structures and they do not have .ts files either.</p>
  
  <p>Relevant portion of my "tsconfig.json" showing I have source mapping enabled:</p>
  
  <pre><code> 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   },                          
  </code></pre>
  
  <p>js.map files <em>are</em> produced and reside in the <em>dist</em> directory next to the .js files.</p>
  
  <p>Example mapping file (portion):</p>
  
  <pre><code>{"version":3,"file":"app.js","sourceRoot":"/","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAGA,mB
  </code></pre>
  
  <p>I've tried:<br>
  1) copying the .ts files from src into dist.<br>
  2) various attempts at editing the app.js.map file manually e.g <em>sourceRoot</em> and <em>sources</em>.  </p>
  
  <p>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? </p>
  
  <p>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").  </p>
  
  <p>Chromium shows the path for the ts file as "<a href="http://localhost:4202/app/cpp-scenes.ts" rel="noreferrer">http://localhost:4202/app/cpp-scenes.ts</a>".  But when I put the .ts file there, no dice.</p>
  
  <p>I don't know if this is a js mapping problem, an Angular 2 problem, an Angular2 CLI problem, or a typescript problem.</p>
  
  <p>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. </p>
  
  <p>Has anyone else had any luck getting source mapping working in an Angular2 CLI project?  </p>