Webpack AngularJS Sourcemaps issue - angularjs

Question

I've been struggling with getting my source-maps working in my app for quite a while. I have set
devtool: 'source-map',
in the webpack configuration, but they are still not available in the Chrome devtools.
I pushed a really simple app using my FE Stack hoping someone could identify the issue, whether it is with webpack, angular, or some other library. https://github.com/coreysnyder/Angular-Webpack3-Seed
Here are the versions I'm running:
{
CoreyApp: '1.0.0',
npm: '4.4.4',
ares: '1.10.1-DEV',
http_parser: '2.7.0',
icu: '57.1',
modules: '48',
node: '6.9.0',
openssl: '1.0.2j',
uv: '1.9.1',
v8: '5.1.281.84',
zlib: '1.2.8'
}
OSX 10.12.6

Answer 1

You will probably have to setup source map for different loaders individually.
For 'ng-annotate-loader' (Docs)
use: [{
loader: 'ng-annotate-loader',
options: {
add: true,
single_quotes: true ,
map: { inline: true, inFile: 'app.js', sourceRoot: __dirname + '/app' }}
}]
For less you can use documentation option like #ahmedelgabri suggested
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "less-loader", options: {
sourceMap: true
}
}]
Old post before OP github changes.
Other option is to add devtoolLineToLine: true in your output, if you want to use devtool: 'source-map'. But devtoolLineToLine is deprecated, so consider changing devtool to something else. devtool: 'source-map' demo image
output: isTest ? {} : {
devtoolLineToLine: true, // <= this line
sourceMapFilename: '[name].map',
path: __dirname + '/dist',
filename: '[name].bundle.js',
publicPath: publicPath
},
Alternatively you could use devtool: 'eval' or some variation of eval, like cheap-module-eval-source-map (similar behavior, but without file names) also works fine for me

Answer 2

I could fix your source maps for JS files, by adding the babel-loader. To do this, you need to install babel-loader:
npm i -D babel-loader#8.0.0-beta.0 #babel/core #babel/preset-env
and then extend your rule for .js
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'ng-annotate-loader',
options: { add: true, single_quotes: true }
},
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
]
}, [...]
]
Ready further details on babel-loader github repo

Answer 3

There is nothing wrong with the Webpack config here https://github.com/coreysnyder/Angular-Webpack3-Seed
here is a gif using your code & setting a breakpoint in view1 file
And here is why the text is blue
And I can see the source just fine
The main issue is the less-loader you need to pass the source-maps options for both, the less-loader & css-loader check the readme
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
sourceMap: true,
},
},
],
},
After doing this you will be able to debug from the styles panel like this
If you want to edit directly the .less files the readme mentions a blog post that can help with this https://github.com/webpack-contrib/less-loader#source-maps
I hope this answers your question