2

It seems that with the latest angular2 npm package there is no way to debug typescript sources. Existing answer on stackoverflow and the article on medium are outdated. I've created a github issue, please support it.

There are two problems:

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):

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

I've tracked down that this path has no relevence since angular sources are compiled using --inlineSources option and so the *.map files contain the sourcesContent key with original content inside. So this is not a problem anymore. But the second problem remains.

2) Even if I simply copy modules folder from github sources, there is a second problem, which is that js files in npm package are compiled into es6 module syntax, which is not supported yet in browsers and a loader, like SystemJS, requires traceur. 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, since it most likely break existing source maps created for js files transpiled by tsc.

Improve this question
2
  • That said debugging JS is "good enough" for most cases. Do you want to see this? i.sstatic.net/ZWg0g.gif It can be possible in last version of angular2. but you have es-2015 source code that is great Commented Jan 15, 2017 at 13:09
  • @yurzui, thanks, yes, I want to debug ts files. What last version do I need? I am using latest version from npm Commented Jan 15, 2017 at 13:45

2 Answers 2

Reset to default
1

UPD I've opened issue asking to enable source map support in the Angular CLI. It also discusses how you can enable source map support already today. Enabling source maps for the framework will essentially allow to debug TypeScript sources.

Angular CLI switched from using System.js to Webpack and I personally dislike System.js, so no answer for System.js here.

You can't debug against TypeScript sources of framework itself, because source maps are generated for compiled JavaScript, not TypeScript. On the other hand generated code is easily readable and it's pretty enough for debugging purposes. The good new is that your own code will be source mapped to original TypeScript sources.

And I don't think there is an easy way to get source maps for Angular against TypeScript sources, unless they are built in together with framework. So the best you can get now is debugging compiled JS.

And now to practice. Create new app with Angular CLI:

$ ng new my-app

Add breakpoint somewhere:

// src/app/app.component.ts
export class AppComponent {
  title = 'app works!';

  constructor() {
    debugger;
  }
}

Start development server:

$ ng serve

And open following URL in your browser: http://localhost:4200/. Observe it stopping at the breakpoint and go to some framework calls in the stack.

own code framework code

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

First, Just a short notice on your attitude... - this should be a comment, as it's not part of an answer. Second, I'm not demanding anything, I'm just saying that an answer provided by Jan Nahody is not helpful, as well as yours. The question clearly states, how to debug ts sources, while you're showing how to debug js sources.
@Maximus It states, that it is currently not possible, unless you rebuild framework yourself with correct source maps, e.g. get sources from GitHub, compile them using tsc with source maps enabled and replace contents of the original NPM package. And states that debugging JS is "good enough" for most cases. But I'm not going to argue any further. Take care.
0

The latest angular 2 use Webpack instead SystemJS. Both system work different.

SystemJS load sources when required. Also transform typescript to JS inside browser. Webpack build the app from sources first. Thats faster. All the work must not be done by your browser.

When trying here to debug libs like angular you must give Webpack a hint. Mean you have to configure your web pack file.

Not sure if Angular CLI this support out of the box. Also take a look at Webpack for debug options.

Sorry here I can't help further.

Improve this answer

6 Comments

angular-cli is built on webpack, it doesn't have ts sources either
Thats correct. Angular stop using systemJS and use Webpack now. The the way to build and run your app is different. Before all the work has been done by your browser. Loading files and transform ts to JS. Now all this work is done by Webpack on system. The browser load the ready "created" app sources. So the way to implement source maps changed.
Here is the official manual how Angular2 use/configure Webpack. (angular.io/docs/ts/latest/guide/webpack.html) It's simple but workable example.
thanks, but have you tried to debug the ts sources using cli yourself?
Sorry not yet. Until now it was not necessary. But I know you can activate the creating source map files. Take a look here: webpack.github.io/docs/configuration.html (filter for debug option).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.