Angular 12 and Webpack 5 not building after upgrade or for new project

1
votes

I have a large application in Angular 11.2 and Webpack 4.44 that I am trying to migrate to version 12 and 5 respectively.

To start, I upgraded my global @angular/cli to v12, and ran the ng new test-upgrade command to create a new app.

When I run ng build in this new app without changing anything it works. But when I installed webpack 5.37.1 and ran the build again, I get this error:

[error] TypeError: The 'compilation' argument must be an instance of Compilation at Function.getCompilationHooks (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:113:10) at C:\src\datahub\tdamui-angular\test-upgrade\node_modules\terser-webpack-plugin\dist\index.js:566:67 at _next41 (eval at create (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:19:10), :77:1) at _next19 (eval at create (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:19:10), :189:1) at Hook.eval [as call] (eval at create (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:19:10), :271:1) at Hook.CALL_DELEGATE [as _call] (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\Hook.js:14:14) at Compiler.newCompilation (C:\src\datahub\tdamui-angular\test-upgrade\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1031:26) at C:\src\datahub\tdamui-angular\test-upgrade\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1073:29 at Hook.eval [as callAsync] (eval at create (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:33:10), :22:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\Hook.js:18:14)

Keep in mind, this is on a new Angular project generated by the cli. All I did was install version 5 of webpack.

So I tried installing version 4 of webpack, and I get other errors. I won't post those because I need webpack v5 to work.

Once I can fix this, then I can work on fixing my large application.

Does anyone know anything about the above error? Or can anyone reproduce if they:

  1. install @angular/cli v12
  2. create a new app with ng new
  3. run ng build (this should work)
  4. Install webpack v5
  5. run ng build (get the above error)
  6. remove webpack
  7. run ng build (will get an error saying webpack module is missing)

At this point, I can't get Angular 12 to work with webpack 4 or 5, so its completely broken, but I know this can't be the case.

I am on Windows 10, using node 14.17.

1
angularwebpack

1 Answers

0
votes

Have you tried NOT installing webpack and just let ng12 default webpack 5 handle things?

That would be (from your list above):

  1. install @angular/cli v12
  2. create a new app with ng new
  3. run ng build (this should work)
  4. Done