Search code examples
angularionic-frameworknrwl-nx

ModuleFederation Ionic Angular reference "different" NG_VALUE_ACCESSOR

I have an NX workspace, running latest NX, Angular & Ionic versions. I have just one host app and one remote.

Right, now I'm trying to create a page with two form controls. When I create a binding either via [(ngModel)] or via [formControl] to ion-input I get an error that ControlValueAccessor is missing. A little bit of debugging has shown that IonInput and the host app reference different NG_VALUE_ACCESSOR objects. It looks like while being a shared dependency on its own both @ionic/angular/standalone doesn't use another shared dependency @angular/forms, and instead included the token in its build.

Any ideas how this could be fixed? I have the default NX Module Federation setup via the withModuleFederation helper function with no extra configuration (which results in all dependencies being singletons and shared). There is no version mismatch, I've went through the whole pnpm-lock.yml. The versions are correct everywhere.

P.S. A bit of exploring the source files in the Network tab has shown that the host app and Ionic reference different WebPack chunks, yet they use the same import path (@angular/forms) in the source code. So, it's either a WebPack bug, or some module federation configuration issue.

This is what it looks like enter image description here

Update #1

If placed an import of "@angular/forms" in the remote – everything starts working as expected, and no errors. No idea why.

Solution

  • Will place it as an answer just in case.

    If placed an import of "@angular/forms" in the remote – everything starts working as expected, and no errors. No idea why.