CODEWITHSUNDEEP
angularwebpackwebpack-2
Sergey Shulik
Sergey Shulik

Reputation: 1010

Error stacktrace with angular 2 and webpack 2

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

enter image description here

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?

Upvotes: 5

Views: 5425

Answers (2)

abhishekgouda patil
abhishekgouda patil

Reputation: 1

In angular2 we can do same level of debugging only thing is we need add a debugger keyword like we do in node then open the console and the moment it reaches your file on leftist see call stack thats where you can find file path at that point and it redirects you directly through ts file so debugging will be easy and as cool as before

Upvotes: 0

kemsky
kemsky

Reputation: 15270

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.

Upvotes: 9

Related Questions