I am facing an issue with my microfrontend architecture project where I use Module Federation. My project structure is: Shell (React) Microfrontend 1 (Next.js) Microfrontend 2 (Angular) Microfrontend 3 (Angular) Microfrontend 4 (Angular) I use URL patterns, so /a/* routes are handled by Microfronted 1, /b/* by Microfrontend 2 and so on. The shell and Microfrontend 1 (Next.js) are working perfectly together. However, I'm getting an error when I try to navigate between the Angular microfrontends. For the Angular microfrontends, I expose the bootstrap.ts file and post the following error when I navigate from one Angular microfrontend to another after going back:
Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. Find more at https://angular.io/errors/NG0203
at injectInjectorOnly (core.mjs:611:15)
at ɵɵinject (core.mjs:622:60)
at Object.ApplicationModule_Factory \[as useFactory\] (core.mjs:27302:102)
at Object.factory (core.mjs:8102:38) at R3Injector.hydrate (core.mjs:8015:35)
at R3Injector.get (core.mjs:7903:33)
at injectInjectorOnly (core.mjs:618:33)
at ɵɵinject (core.mjs:622:60)
at useValue (core.mjs:7697:65)
at R3Injector.resolveInjec`your text`torInitializers (core.mjs:7952:17)
Can anyone help me resolve this error and successfully switch between Angular microfrontend?
I shared the bootstrap file, The shared version was set to be the same, I tried exposing app.module.ts, etc. everyone failed
