Angular Module Federation微前端Reactive Forms校验重复问题求助

问题原因 #

• 你当前的Module Federation共享依赖配置中缺少@angular/forms包的共享声明，导致主应用和微应用各自加载了独立的@angular/forms实例
• 两份独立的表单包实例会分别对响应式表单做状态校验、触发变更检测，路由切换时两份实例的状态更新都会触发视图渲染，最终导致校验提示重复出现
• 单独运行微应用时仅存在一份@angular/forms实例，因此不会触发该异常

解决方案 #

分别修改主应用、微应用的Module Federation配置，在shared字段中添加@angular/forms的单例共享声明即可：

shared: share({
  "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
  "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
  "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
  "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  // 新增@angular/forms共享配置
  "@angular/forms": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  ...sharedMappings.getDescriptors()
})

修改完成后需要注意：

• 确认主应用和微应用的@angular/forms版本完全一致，避免strictVersion校验失败导致项目启动报错
• 重启主、微应用的构建服务，清除浏览器缓存后再验证功能

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