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

Question

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.

It sounds like it could be a "linkage error" (for lack of a better term): your runtime (however you built it) is picking up the wrong module from the wrong place. Look at some of the different posts in this thread for more details: stackoverflow.com/a/54647323/421195. See also How do I fix "Inject() must be called from an injection context"? — paulsm4
– paulsm4, Commented Oct 19, 2022 at 5:34
Thanks for your suggestion. I tried the solution and it didn't work for me. — Deepa R
– Deepa R, Commented Oct 21, 2022 at 2:04

juan sebastian franco · Accepted Answer · 2024-09-20 01:16:51Z

0

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.

answered Sep 20, 2024 at 1:16

juan sebastian franco

1

Sign up to request clarification or add additional context in comments.

Comments

Ayush Maurya · Accepted Answer · 2024-12-11 06:14:48Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related