CODEWITHSUNDEEP
angularmicro-frontendangular-module-federation
Deepa R
Deepa R

Reputation: 41

Angular module federation with multiple angular versions of angular core for shell and micro-frontends

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.

Upvotes: 4

Views: 2812

Answers (2)

Ayush Maurya
Ayush Maurya

Reputation: 1

The host in my application is v12 and the remote is v15, I faced the same issue, but instead of loading the module using loadRemoteModule. I am loading it as a web component.

        {
            matcher: startsWith('data-visualization'), // route
            component: WebComponentWrapper, // wrapper for the component
            data: {
                remoteEntry: 'http://localhost:4300/remoteEntry.js',
                remoteName: 'v17',
                exposedModule: './web-components',
                elementName: 'superset-frontend'
              } as WebComponentWrapperOptions
        },

You have to import them all from the @angular-architects/module-federation-tools

import { startsWith, WebComponentWrapper, WebComponentWrapperOptions } from '@angular-architects/module-federation-tools';

You can take the help from this blog. blog link

Upvotes: 0

juan sebastian franco
juan sebastian franco

Reputation: 1

Currently, we are using module federation for the micros in my work.

The error Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor because the shell calls more than one Angular version, in your case 13 and 14.

However, our only solution was to migrate the shell app to the higher angular version.

Upvotes: 0

Related Questions