升级后或新项目无法构建 Angular 12 和 Webpack 5

Posted 2023-02-16

【中文标题】升级后或新项目无法构建 Angular 12 和 Webpack 5

【英文标题】：Angular 12 and Webpack 5 not building after upgrade or for new project

【发布时间】：2021-08-08 16:06:30

【问题描述】：

我在 Angular 11.2 和 Webpack 4.44 中有一个大型应用程序，我正在尝试分别迁移到版本 12 和 5。

首先，我将我的全局 @angular/cli 升级到 v12，然后运行 ​​ng new test-upgrade 命令来创建一个新应用。

当我在这个新应用程序中运行 ng build 而不更改它的任何内容时。但是当我安装 webpack 5.37.1 并再次运行构建时，我收到了这个错误：

[error] TypeError: 'compilation' 参数必须是 Compilation 的一个实例 在 Function.getCompilationHooks (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:113:10) 在 C:\src\datahub\tdamui-angular\test-upgrade\node_modules\terser-webpack-plugin\dist\index.js:566:67 在 _next41（创建时的评估（C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:19:10），:77:1） 在 _next19（创建时的评估（C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:19:10），:189:1） 在 Hook.eval [as call] (eval at create (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:19:10), :271:1) 在 Hook.CALL_DELEGATE [as _call] (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\Hook.js:14:14) 在 Compiler.newCompilation (C:\src\datahub\tdamui-angular\test-upgrade\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1031:26) 在 C:\src\datahub\tdamui-angular\test-upgrade\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1073:29 在 Hook.eval [as callAsync] (创建时的 eval (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\HookCodeFactory.js:33:10), :22:1) 在 Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\src\datahub\tdamui-angular\test-upgrade\node_modules\tapable\lib\Hook.js:18:14)

请记住，这是一个由 cli 生成的新 Angular 项目。我所做的只是安装第 5 版的 webpack。

所以我尝试安装第 4 版的 webpack，但我得到了其他错误。我不会发布这些，因为我需要 webpack v5 才能工作。

一旦我能解决这个问题，我就可以着手修复我的大型应用程序。

有人知道上述错误吗？或者任何人都可以复制，如果他们：

安装@angular/cli v12 使用 ng new 创建一个新应用 运行 ng build（这应该可以） 安装 webpack v5 运行 ng build（出现上述错误） 移除 webpack 运行 ng build（会得到一个错误提示 webpack 模块丢失）

在这一点上，我无法让 Angular 12 与 webpack 4 或 5 一起工作，所以它完全坏了，但我知道这不可能。

我在 Windows 10 上，使用节点 14.17。

【参考方案1】：

你有没有试过不安装 webpack 而是让 ng12 默认 webpack 5 处理事情？

那将是（从上面的列表中）：

安装@angular/cli v12 使用 ng new 创建一个新应用 运行 ng build（这应该可以） 完成