Description
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
},