title: How to debug angular2 typescript files
body: <p>It seems that with the latest angular2 npm package there is no way to debug typescript sources. Existing <a href="https://stackoverflow.com/questions/36423923/how-angular2-create-bundles-directory-and-how-do-i-generate-source-map">answer on stackoverflow</a> and <a href="https://medium.com/@ttemplier/how-to-debug-the-typescript-source-code-of-angular2-99a593e2983f#.18kspegsf" rel="nofollow noreferrer">the article on medium</a> are outdated. I've created <a href="https://github.com/angular/angular/issues/13928" rel="nofollow noreferrer">a github issue</a>, please support it.</p>
  
  <p>There are two problems:</p>
  
  <p>1) TypeScript sources are no longer hardcoded as data URI inside source maps, but are actually point to some non-existent location in npm (it's actually a location in angular git hub sources, but is not something inside npm package):</p>
  
  <pre><code>{
     "version":3,
     "file":"application_ref.js",
     "sourceRoot":"",
     "sources":["../../../../modules/@angular/core/src/application_ref.ts"] &lt;-------
  </code></pre>
  
  <p>I've tracked down that this path has no relevence since angular sources are compiled using <code>--inlineSources</code> option and so the <code>*.map</code> files contain the <code>sourcesContent</code> key with original content inside. So this is not a problem anymore. But the second problem remains.</p>
  
  <p>2) Even if I simply copy <code>modules</code> folder from github sources, there is a second problem, which is that <code>js</code> files in npm package are compiled into <code>es6</code> module syntax, which is not supported yet in browsers and a loader, like SystemJS, requires traceur. For example, <code>common/index.j</code>:</p>
  
  <pre><code>export { NgLocalization, CommonModule, NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, VERSION, Version, PlatformLocation, LocationStrategy, APP_BASE_HREF, HashLocationStrategy, PathLocationStrategy, Location } from './src/common';
  </code></pre>
  
  <p>But I can't use <code>traceur</code>, since it most likely break existing source maps created for <code>js</code> files transpiled by <code>tsc</code>.</p>