解决Module Federation中的NG_VALUE_ACCESSOR问题

引言

在现代Web开发中，模块联邦（Module Federation）技术被广泛应用于微前端架构中。特别是在使用NX、Angular和Ionic构建应用时，模块联邦可以帮助我们实现代码共享和独立部署。然而，某些配置问题可能会导致意想不到的错误，比如ControlValueAccessor缺失的问题。今天我们将探讨如何在NX工作空间中解决这个问题。

问题描述

在一个NX工作空间中，我们有一个主应用和一个远程模块。尝试在一个页面中添加两个表单控件时，无论使用[(ngModel)]还是[formControl]绑定到ion-input控件，都会抛出ControlValueAccessor缺失的错误。调试结果显示，IonInput组件和主应用引用了不同的NG_VALUE_ACCESSOR对象。这是因为虽然@ionic/angular/standalone和@angular/forms都是共享依赖，但它们在构建时包含了不同的NG_VALUE_ACCESSOR实例。

问题分析

• 模块联邦配置：默认的NX模块联邦配置使得所有依赖都是单例共享的。
• 版本匹配：通过检查pnpm-lock.yml，确认所有依赖版本匹配。