How to configure karma so typescript source files would be debuggable

Question

I\'ve downloaded a seed project Angular2 Webpack Starter and got it up and running without an issue. One inconvenience that I have with it is debugging source files under unit t

Answer 1

I had a similar issue with my project (which isn't the Angular2 Webpack Starter, but I believe has the same cause.)

WebPack, by default, doesn't pass source maps up to Karma unless the file extension is .js (or .jsx if you're using React). In a setup like this one, Karma+WebPack just transpiles the .ts files (or .tsx) straight from TypeScript to JavaScript and serves them under the same file name.

I found a solution that worked for me on the GitHub Issues page for karma-webpack. The trick is to inject webpack.SourceMapDevToolPlugin with a widened file filter into the webpack config. For you, that should look something like this:

var webpack = require('webpack');
// in your config.set:
plugins: [
  // existing plugins go here
  new webpack.SourceMapDevToolPlugin({
    filename: null, // if no value is provided the sourcemap is inlined
    test: /\.(ts|js)($|\?)/i // process .js and .ts files only
  })
]