No sourcemaps generated for 'ng serve' with angular-cli 1.5.2

[phillashworth]

Sourcemaps stopped working for dev builds using ng serve in my app after upgrading to angular-cli 1.5.

I tested this by creating a pristine project and the same thing happens, there seem to be no sourcemaps available over the development server. A regular ng build does create the .map files.

Versions

Angular CLI: 1.5.2
Node: 8.4.0
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

Repro steps

• Step 1
  npm install -g @angular/cli
• Step 2

ng g test-app
cd test-app

• Step 3
  ng serve

Observed behavior

No sourcemaps are availbale over the dev server.
e.g. http://localhost:4200/main.bundle.js.map -> 404 not found

[clydin]

Development targets now use a different type of source map that is integrated into the JS bundle. For production standard soucemap files are still generated.

[phillashworth]

Thanks @clydin, the browser debugger (Chrome or Firefox) does not seem to pick up these integrated source maps and just displays the minified code. I'm not sure how to go about debugging the code, setting breakpoints etc. Any suggestions would be much appreciated.

[pmullot]

Happens to me too.
A workaround is to ng build your project, which still generate the map files, and then serve from the dist directory with http-server, for example.

No really classy.. but until they fix the issue, it helps

[filipesilva]

Just to be sure we're looking in the same place, do you not get these sources in the browser debugger?

If you add debugger; to main.ts does the breakpoint not show?

[phillashworth]

@filipesilva I have always set my breakpoints in the code shown under localhost:4200 -> main.bundle.js which previously displayed the un-minified code, but now with 1.5.0+ it shows minified.

I was not aware that I could set them under webpack:// and now I have tried that as per your screenshot it works perfectly. So looks like a non-issue, thanks for looking into it and pointing me in the right direction.

[filipesilva]

@phillashworth cool, glad to hear it's sorted for you. I'll leave the issue open for a while to see if other users are also ok.

[AbakumovAlexandr]

@filipesilva, the workaround of using sources under the webpack:// node is working in Chrome/FF, but it isn't great because 'Search all sources' doesn't work. You have to navigate webpack:// tree every time you need to set a breakpoint instead of quickly searching for desired line across your project in browser's DevTools.

[aciccarello]

From what I can tell, this setup doesn't allow debugging from VS Code. Is that correct?

[Eblax]

I have an application which has both Angular 1.6 .js files and Angular 5 .ts files (using UpgradeModule)

With the files created with ng build I can easily find and debug the .js files of the application.
But when running ng serve I only get the .ts files.

If there isn't something else I can do to debug these js files (except serving the content from the built version) I think there should be an option to still create map files with ng serve.

Edit: Fixed it by editing node_modules/@angular/cli/commands/serve.js and changing commandOptions.evalSourcemaps to false