WebAssembly in Angular 12 breaks ng serve (Webpack 5)

[Timebutt]

Bug Report

Affected Package

I'm guessing @angular-devkit/build-angular.

Is this a regression?

Yes this is a regression: in Angular 11 with Webpack 4 there was no such error message and the project would just compile.

Description

When I run ng serve after upgrading to Angular 12, I get an error message from the CLI and the project won't compile. This is due to the upgrade to Webpack 5 and a change in their default configuration, which now explicitly requires experiments.asyncWebAssembly: true to be added to the Webpack configuration. As Angular CLI users by default don't have access to the Webpack configuration the project for many users that use WebAssembly in their Angular project might break.

Advanced users may fix this by using custom builders that allow changes to the Webpack configuration, but I don't think that's what we want for the Angular CLI.

Minimal Reproduction

Pull the repo, install the dependencies and run ng serve.

https://github.com/Timebutt/repro-app

Exception or Error

The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)

Your Environment

Angular Version:

Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.0
... cli, common, compiler, compiler-cli, core, platform-browser
... platform-browser-dynamic

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@schematics/angular             12.0.0
rxjs                            7.0.1
typescript                      4.2.4

Workaround

For now, I can work around this issue by patching node_modules by adding the following snippet to node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js (somewhere in the config object line 317 through the end).

experiments: {
    syncWebAssembly: true,
    asyncWebAssembly: true
},

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}