How to debug angular2 typescript files

Question

It seems that with the latest angular2 npm package there is no way to debug typescript sources. Existing https://stackoverflow.com/a/126807/ and the article on average are deprecated. I created a github question , please support it.

There are two problems:

Sources

1) typescript are no longer hardcoded as URIs of data inside the source maps, but actually point to some non-existent place in npm (this is actually the location in the sources of the angular git hub), but not something inside the npm package):

{ "version":3, "file":"application_ref.js", "sourceRoot":"", "sources":["../../../../modules/@angular/core/src/application_ref.ts"] <------- 

I found out that this path has nothing to do with it, since angular sources are compiled using the --inlineSources parameter, so the *.map files contain the sourcesContent key with the source content inside. So this is no longer a problem. But the second problem remains.

2) Even if I just copy the modules folder from github sources, the second problem arises: the js files in the npm package are compiled into the es6 module es6 , which is not yet supported in browsers, and a bootloader like SystemJS requires tracing. For example, common/index.j :

 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'; 

But I can’t use traceur , as it is likely to break the existing source maps created for js files transferred using tsc .

Answer 1

UPD I opened the issue with the request to enable source map support in the Angular CLI. It also discusses how you can enable source map support today. Enabling source maps for the structure will significantly allow you to debug TypeScript sources.

Angular CLI switched from using System.js to Webpack, and I personally don't like System.js, so there is no answer for System.js here.

You cannot debug source files from TypeScript sources themselves, because source maps are created for compiled JavaScript, not TypeScript. On the other hand, the generated code is easy to read and sufficient for debugging purposes. The good thing is that your own code will be a source mapped to source TypeScript sources.

And I don’t think that there is an easy way to get source maps for Angular from TypeScript sources if they are not built in with the framework. Thus, it is best to get debugging compiled JS.

And now practice. Create a new application with the Angular CLI:

 $ ng new my-app 

Add a breakpoint somewhere:

 // src/app/app.component.ts export class AppComponent { title = 'app works!'; constructor() { debugger; } } 

Launch the development server:

 $ ng serve 

And open the following URL in your browser: http: // localhost: 4200 / . Watch for it to stop at the breakpoint and go to some structure calls on the stack.

Answer 2

The latter angular 2 uses Webpack instead of SystemJS. Both systems work different.

SystemJS, if necessary, load sources. Also convert typescript to JS inside the browser. Webpack first create the application from sources. It's faster. All work should not be done by your browser.

When trying to debug libraries like angular, you should give a hint to Webpack. You must configure your web package file.

Not sure if Angular CLI is this support out of the box. Also pay attention to Webpack for debugging options.

Sorry, I can’t help further.