Angular13升级至14后出现UntypedFormBuilder重复声明错误

问题场景 #

• 将Angular项目从13版本升级至14版本
• 在现有模块添加新组件后，将FormBuilder替换为UntypedFormBuilder，构建或运行项目时出现以下错误：

./node_modules/@angular/forms/fesm2020/forms.mjs:9326:6 - Error: Module parse failed: Identifier 'UntypedFormBuilder' has already been declared (9326:6)
File was processed with these loaders:

• ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
• ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  |
  |

class UntypedFormBuilder extends UntypedFormBuilder {
| group(controlsConfig, options = null) {
| return super.group(controlsConfig, options);

解决方法 #

1. 清理依赖缓存并重新安装 #

依赖缓存冲突是此类问题的常见诱因，执行以下操作：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install # 或 yarn install

2. 统一Angular包版本 #

确保package.json中@angular/forms与其他Angular核心包（如@angular/core、@angular/common）版本完全一致，避免跨版本冲突：

# 统一升级到Angular 14对应版本
npm install @angular/forms@14 @angular/core@14 @angular/common@14

3. 检查代码中的导入与声明 #

• 排查代码中是否重复导入UntypedFormBuilder，正确导入方式为：

  import { UntypedFormBuilder } from '@angular/forms';
  

• 不要在组件或模块的providers数组中重复声明UntypedFormBuilder——Angular 14中该服务已由ReactiveFormsModule自动提供。

4. 清除Angular构建缓存 #

# 清理CLI缓存
ng cache clean
# 重新构建项目
ng build --prod # 或 ng serve

5. 检查自定义Webpack配置（若有） #

如果项目自定义了Webpack配置，确认没有对@angular/forms包进行重复处理（如重复添加loader、设置别名），避免模块被多次解析。

额外说明 #

Angular 14中FormBuilder默认已是强类型实现，若无需保留无类型表单能力，可直接继续使用FormBuilder，无需替换为UntypedFormBuilder。

内容的提问来源于stack exchange，提问作者Paribartan Kalathoki