How do i configure angular-cli & webpack to create source maps for debugging

Question

This subject which should be trivial turned out to be a mess for me. I have am angular-cli project, and trying to configure webpack to create source maps, d.ts files and polyfill files. first things first, tried to configure source maps. I did ng eject and have the config file. what do I need to configure in the config file to create source maps?

Tried looking for an answer online... nothing really relevant.

score 0 · Answer 1 · answered Nov 06 '17 at 08:36

0

if i understand you currectly all you need to is add this line to your webpack.config

devtool: 'source-map'

answered Nov 06 '17 at 08:36

Goor Lavi

412
3
16

1

when doing **ng eject** to control the webpack config it uses the **plugins** property instead of the **devtool** property – TKDev Nov 06 '17 at 08:50

score 0 · Accepted Answer · answered Nov 06 '17 at 08:48

Found out how to fix this. In an angular-cli project the webpack config is hidden until an ng eject command that spits out the webpack.config file. The webpack config file does not use the regular devTools property rather the plugins property where it creates an instance of SourceMapDevToolPlugin passing it 4 parameters filename, moduleFilenameTemplate, fallbackModuleFilenameTemplate, sourceRoot, removing all parameters except filename and changing its value to "[name].js.map" resolved this issue, and now for each bundle file a map.js file is created.

How do i configure angular-cli & webpack to create source maps for debugging

2 Answers2