sourcemap not working on firefox with Webpack on Angular 2 application

Question

I wanted to use this yeoman generator to create an anuglar 2 application (using Webpack): https://github.com/shibbir/generator-angular2-typescript

But i'm having an issue with sourcemaps. I'm not able to see .ts line numbers on Firefox console. What i see instead is a "link" to something like this: view-source:http://localhost:3000/app.js line 265 > eval If i click on the line number from the console i get to an error page saying Cannot GET /app.js%20line%20265%20%3E%20eval and an alert "The specified line was not found" (which is not surprising since the "file" is only 1 line long).
The same thing happened using this project: https://github.com/AngularClass/angular2-webpack-starter

On Chrome they both work fine and the line numbers on the console point correctly to the .ts file

Looking on the internet i've found there were some bugs on Firefox with sourcemaps but it was about version 45 or so and it was fixed (using Firefox 49 now)

Answer 1

You need Firefox 50, and you need to manually enable Sourcemaps.

At the moment source map support is disabled by default. To enable it, visit about:config, find the preference devtools.sourcemap.locations.enabled and set it to true.

https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Source_maps