Source maps no longer work (serve and build) after updating to Angular 12

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

After updating to Angular 12 from Angular 11, I am receiving error messages from the CLI when running ng serve or ng build. Without disabling the source maps in the angular.json build settings, I am unable to build my project.

I have disabled the sourceMap property in both the angular.json and tsconfig.base.json but the error still shows up in the CLI. Strangely the error does not always show up in the CLI when running serve, e.g. if I stop serving and try again, sometimes the error will go away. Errors will still be shown in the browser console, e.g.

DevTools failed to load SourceMap: Could not load content for http://localhost:4200/sockjs.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Fortunately, disabling the source maps resolved the issue with building my project. However this is not something that is ideal.

🔬 Minimal Reproduction

Update from Angular 11 to 12, e.g. ng update @angular/cli

🔥 Exception or Error

√ Compiled successfully.
(node:17668) UnhandledPromiseRejectionWarning: Error: Content and Map of this Source is not available (only size() is supported)
    at SizeOnlySource._error (C:\***\node_modules\webpack\node_modules\webpack-sources\lib\SizeOnlySource.js:16:10)
    at SizeOnlySource.buffer (C:\***\node_modules\webpack\node_modules\webpack-sources\lib\SizeOnlySource.js:30:14)
    at _isSourceEqual (C:\***\node_modules\webpack\lib\util\source.js:21:51)
    at isSourceEqual (C:\***\node_modules\webpack\lib\util\source.js:43:17)
    at Compilation.emitAsset (C:\***\node_modules\webpack\lib\Compilation.js:3496:9)
    at C:\***\node_modules\webpack\lib\Compiler.js:525:28
    at C:\***\node_modules\webpack\lib\Compiler.js:1103:17
    at eval (eval at create (C:\***node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:17668) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by re
jecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https
://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:17668) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js proces
s with a non-zero exit code.
(node:17668) UnhandledPromiseRejectionWarning: Error: Content and Map of this Source is not available (only size() is supported)
    at SizeOnlySource._error (C:\***\node_modules\webpack\node_modules\webpack-sources\lib\SizeOnlySource.js:16:10)
    at SizeOnlySource.buffer (C:\***\node_modules\webpack\node_modules\webpack-sources\lib\SizeOnlySource.js:30:14)
    at _isSourceEqual (C:\***\node_modules\webpack\lib\util\source.js:21:51)
    at isSourceEqual (C:\***\node_modules\webpack\lib\util\source.js:43:17)
    at Compilation.emitAsset (C:\***\node_modules\webpack\lib\Compilation.js:3496:9)
    at C:\***\node_modules\webpack\lib\Compiler.js:525:28
    at C:\***\node_modules\webpack\lib\Compiler.js:1103:17
    at eval (eval at create (C:\***\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:17668) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by re
jecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https
://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

🌍 Your Environment

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.2
@angular-devkit/build-angular   12.0.2
@angular-devkit/core            12.0.2
@angular-devkit/schematics      12.0.2
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.0.2
rxjs                            7.1.0
typescript                      4.2.4

Anything else relevant?

This issue describes the same problem and it seems to be coming from a breaking change in the latest version of Webpack. https://github.com/gajus/write-file-webpack-plugin/issues/74

[alan-agius4]

@ganeshbarhate since you are using a custom builder, you need to update the breaking changes in angular.json manually. See all the breaking changes in https://github.com/angular/angular-cli/releases/tag/v12.0.0

[ganeshbarhate]

Okay … I guess I found the root cause , we have to provide the source map option in serve now with angular upgrade 12 it resolved my issue

Im having the same problem as you, but providing source map only solve part of the problem, now i can debug but the variables names does not show correctly, it appears only as "t"or “e”, not its real name.

try to set optimization:false as well , should solve your issue.