Error stacktrace with angular 2 and webpack 2

Question

I am trying to setup dev environment with angular2/webpack2 stack and i have next webpack config:

// Helper: root() is defined at the bottom
var path = require("path");
var webpack = require("webpack");

// Webpack Plugins
var autoprefixer = require("autoprefixer");
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");



module.exports = function makeWebpackConfig(env) {

  var config = {};

  config.devtool = "source-map";

  config.entry = {
    "main": "./src/main.ts",
    "vendor": "./src/vendor.ts",
    "polyfills": "./src/polyfills.ts"
  }

  config.output = {
    "chunkFilename": "js/[name].[hash].chunk.js",
    "filename": "js/[name].js",
    "path":  root("dist"),
    "sourceMapFilename": '[file].map',

  };

  config.resolve = {
    extensions: [".ts", ".js", ".css", ".html"]
  };

  config.module = {
    rules: [
      { test: /\.ts$/,                                                                       loaders: ["awesome-typescript-loader", "angular2-template-loader"] },
      { test: /\.css$/, loaders: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader:  ["css-loader", "postcss-loader"] }) },
      { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,     loaders: ["file-loader?name=fonts/[name].[hash].[ext]?"] },
      { test: /\.html$/,                                                                     loaders: ["raw-loader"] }
    ]
  };

  config.plugins = [
    new ExtractTextPlugin(
      { filename: "css/[name].[hash].css" }
    ),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      root("./src")
    ),
    new webpack.LoaderOptionsPlugin({
      options: {
        sassLoader: {},
        postcss: [autoprefixer({ browsers: ["last 2 version"] })]
      }
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunksSortMode: "dependency"
    }),
    new CommonsChunkPlugin({
      name: ["vendor", "polyfills"]
    }),
  ];

  config.devServer = {
    contentBase: './src',
    historyApiFallback: true,
    quiet: true,
    stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
  };

  return config;
};

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

my problem: i can see valid ts source-map files (see "2" on pic), but when i got exception i see only references to compiled bundle (see "1" on pic) in stacktrace. question: How can i configure webpack to see correct references to source-map *.ts files, but not to compiled bundle js files?

Answer 1

Error.stack is generated by V8, which knows nothing about source maps, however if you do console.log(error) DevTools will replace references using source maps, but zone.js wraps original error and extracts stack as string, so DevTools can not replace references any more. You could try to use stacktrace mappers like sourcemapped-stacktrace.