How do I get the source maps to work in chrome for jhipster app that uses webpack and angular5?

Question

I have generated an JHipster Gateway project which is a Java Spring app with a Angular5 frontend. JHipster configures the Angular app using WebPack.

I am having trouble getting debugging to work for the Angular application. I haven't done this in a while so it may be a rookie mistake so I am looking for any help I can get.

The WebPack configuration file for the dev environmen has a line in it for configuring the source map that is contains the following:

module.exports = webpackMerge(commonConfig({ env: ENV }), {
devtool: 'eval-source-map',

From what I understand, I should see webpack:// in the sources tab but I don't see it.

Can anyone point me in the right direction, this is probably more of a WebPack question than jhipster.

Is there something I else I need todo to get to debug my typescript in chrome?

Thanks so much for your help!

Answer 1

Oops ... my bad ... so embarrassed.

I didn't realize that the webpack build failed because I changed versions of node and I needed to re-install my node modules to get the sass processor to build properly. It looks like the SASS processing was failing in the webpack build and I'm guessing that happens before it generates the source maps.

Once I fixed the problem I did see the source maps and the webpack:// in my source tab in chrome.

Sorry about that