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

You need to comment out Istanbul loader inside your webpack.test.config.js, like this

    // {
    //   enforce: 'post',
    //   test: /\.(js|ts)$/,
    //   loader: 'istanbul-instrumenter-loader',
    //   include: helpers.root('src'),
    //   exclude: [
    //     /\.(e2e|spec)\.ts$/,
    //     /node_modules/
    //   ]
    // }

then simply run:

 npm run watch:test

Answer 2

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
  })
]