title: Debug Angular 2 Typescript with errors pointing to generated Javascript files
body: <p>When I develop an Angular 2 app in Typescript it compiles to Javascript files. The errors in the browser point to a line number in the .js files e.g.:</p>
  
  <p><code>TypeError: Phone.query2 is not a function phone_list.controller.js:5:27)</code></p>
  
  <p>However what I want is a pointer to the line in the actual .ts file.</p>
  
  <p>The corresponding sourcemap files are in place and the generated .js files point to the mapfiles e.g.:</p>
  
  <p><code>//# sourceMappingURL=phone_list.controller.js.map</code></p>
  
  <p>I have tried debugging in Firefox, Chrome and Webstorm.</p>
  
  <p><strong>Update</strong></p>
  
  <p>To reproduce follow these steps:</p>
  
  <p><code>git clone https://github.com/johnpapa/angular2-tour-of-heroes</code></p>
  
  <p>install the npm packages
  <code>npm i</code></p>
  
  <p>In dashboard.component.ts add these two lines:</p>
  
  <pre><code>var test:any = null;
  console.log(test.length);
  </code></pre>
  
  <p>This should cause throwing an error.</p>
  
  <p>Run the project with <code>npm start</code></p>
  
  <p>In the console Chrome shows:</p>
  
  <pre><code>TypeError: Cannot read property 'length' of null
      at DashboardComponent.ngOnInit (http://localhost:3000/app/dashboard.component.js:34:37)
  </code></pre>
  
  <p>Which points to .js files instead of the .ts files</p>