angular: Source maps not working with Angular 2. Only compiled source locations shown.

I’m submitting a … (check one with “x”)

[x] bug report

Current behavior When throwing any kind of exception in an Angular 2 app (e.g., from the constructor of a component) the error messages produced do not appear to support source maps.

Expected behavior

Mainly, I expect source locations to show in stack traces. Especially for trivial examples like throwing an exception from inside of a component.

Reproduction of the problem

I have tested this in a simple example built with angular-cli, it is trivial to reproduce.

https://github.com/chrisnicola/ng2-error-message-example

Edited with results of testing 2016-09-22

After extensive testing the issue may be related to the way the Chrome parses stack traces and maps them in the console to the source map. However Chrome does do this properly, but for some strange reason logging stack traces inside of an Angular 2 app (or possibly just a Zone) doesn’t work.

Testing

The following trivial code is what I’ve used to test with. You will get different results if this code is contained within Angular2 or Zone.js managed code (such as a Component constructor) than if it is outside in the root of the same typescript file. Namely that source maps don’t work for the former but do otherwise.

try {
  throw new Error("Thrown.")
} catch (e) {
  console.log(e.stack)
}
You can also just do:

console.log((new Error("Not Thrown")).stack)

Results:

1. You can log a stack trace with the above code snippet and the Chrome dev tools console will show original source locations.
2. This is not true if that code is contained inside something running in Angular 2 like a Component constructor
3. This is still true if the code is contained inside something like an Angular 1 controller constructor
4. Caveat 1: Only full source map files work however (so webpack must be configured to use “source-map” as the dev tool). This means that this will not work with angular-cli until it is changed to output source map files.
5. Caveat 2: Passing multiple arguments to console.log such as console.log("Error: ", e.stack) does break source mapped line locations (probably a Chrome bug)
6. Caveat 3: This won’t work with bare errors at all, e.g.) throw “Error”

Conclusions

Support for logging stack traces with source mapped source locations is clearly a bit spotty in Chrome. It does work but not if there are multiple arguments, and you must pass the .stack property of the error to the log and not the error directly.

However while it works, for some reason any errors logged from inside of an Angular 2 component don’t work even when the stack traces are nearly identical. I have no idea why this happens but suspect it may have something to do with zones. As I understand little about how Zone.js works or what it does I can’t really be of any more help than this.

In the end it appears that for the moment logging original locations in stack traces in Angular 2 apps is not possible. Something I would suggest is a show stopper, particularly considering this is a Typescript oriented framework.

If I’m still just doing something wrong here please let me know. Please, if anyone has an example that shows error handling working with original source locations in the stack traces please let me know.

What is the motivation / use case for changing the behavior?

Stack traces from a Typescript based codebase that don’t support original source locations are extremely hard to work with, so this is a pretty serious productivity burden. That being said it is not impossible that this represents a bug that should be fixed in the Chrome dev tools and not Angular.

• Angular version: 2.0.0
• Browser: [Chrome]
• Language: [TypeScript 2.0.2]