The issue mentioned above is observed in Chrome 59.0.3071.115 and Firefox 54.0.1
Extensive research has been conducted to obtain accurate line numbers for the Typescript source code using Webpack 2.2.1 and the open-browser-webpack-plugin. Various options have been tried by setting the devtool to different configurations:
//https://webpack.js.org/configuration/devtool/
//devtool: 'eval', //eval very fast but inaccurate line numbers
//devtool: 'eval-source-map', //initially slow but rapid rebuild speed and supposedly correct line numbers (not for Typescript)
//devtool: 'source-map', //very slow, recommended for production, most precise source maps
//devtool: 'cheap-module-eval-source-map',
//devtool: 'inline-source-map',
None of the devtool options provided above offer the right line number for the source code.
Displayed below is an example in Chrome DevTools with the Webpack devtool option set as "eval-source-map", which also applies to "cheap-module-eval-source-map":
https://i.sstatic.net/ufz11.png
Here we see the correct source code file, although the line number is incorrect: https://i.sstatic.net/gW2yQ.png
Similarly, Firefox presents the wrong line number:
https://i.sstatic.net/57B6C.png
Lastly, the login.component.ts file with the console.log("hello world"); on line 32:
# Angular component code here
For reference, here is my webpack.config.js:
# Webpack configuration details here
And the contents of my tsconfig.json:
# Typescript compiler options defined here
Finally, my npm package.json:
# Dependencies and scripts specified here
It is acknowledged that the line number displayed for the compiled version of the Typescript file login.component.ts in Chrome Developer Tools might not align with the original source code line numbers. Is there a way to adjust the sourcemap settings in Webpack to reflect the accurate line numbers of login.component.ts before Typescript compilation?