module-federation-examples
module-federation-examples copied to clipboard
module-federation
Error when switching between Angular micro frontends in a project using Module Federation
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
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.resolveInjectorInitializers (core.mjs:7952:17)
Can anyone help me resolve this error and successfully switch between Angular microfrontend?
