Angular module federation with multiple angular versions of angular core for shell and...

I'm using angular module-federation library. I'm using a shell application that uses angular 13.1.1 version. There are few micro frontends that uses angular 13.1.1 version. There is one micro frontend that uses angular 14.2.6. The micro frontends that uses angular 13.1.1 work fine. However, I'm getting the following error, when the micro frontend application that uses angular 14.2.6 is accessed.

Subscriber.js:91 ERROR Error: Uncaught (in promise): 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 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.

I have the following configuration in the shell application's webpack.config.js

shared: share({ "@angular/core": { requiredVersion: 'auto' }, "@angular/common": { requiredVersion: 'auto' }, "@angular/common/http": { requiredVersion: 'auto' }, "@angular/router": { requiredVersion: 'auto' }, "@angular/animations": { requiredVersion: 'auto' }, ...sharedMappings.getDescriptors()})

This has been suggested in the following website as well https://www.angulararchitects.io/aktuelles/pitfalls-with-module-federation-and-angular/

I think the error is due to multiple angular versions. But, I'm not sure how to resolve this.

Please suggest some solutions.

Continue reading...