Native federation with Angular 20 Error: NG0203: inject() must be called from an injection

[AmmarAhmed]

For which library do you have a feature request?

native-federation

Information

I have a problem with angular 20 and native federation 20.1.6 to integrate mfe ont my shell application . I tried the solution with "sed" to change builder.js but she dont work for me !
My MFE is on angular 20.2.2 and my Host on 20.3.0 i get this error

If someone have any idea, please share with me ! Thanks .

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[Aukevanoost]

Do you happen to have a small test setup or link to a repo where this issue occurs? Then we can reproduce and narrow down the issue.

[manfredsteyer]

Very likely, this is a version mismatch.

[AmmarAhmed]

When i put MFE and Shell exactly on the same versions like 20.3.0, all works fine.
But when the versions are not same even if I put ...shareAll({ singleton: true, strictVersion: false, requiredVersion: "auto" }), I get the error described on the picture.

it seems like with angular 20 and native federation 20, we must have both mfe and shell exactly on the same versions !

[Aukevanoost]

Great you got it to work! Unfortunately the answer here is, it depends.

A little backstory: The Angular team releases a major every half a year. This means that breaking changes in between these majors (like the breaking change in the SSR environment injector in version 20.3) have to happen in minors. I'm not saying this breaking change caused the issue for you but you can assume that:

If your remote and host rely on each other (like through the injection context or by lazy loading a remote as standalone component), it is best to match the versions up to the level of minor.

This way can assume you're moderately safe. If you don't like this, you can switch to webcomponents or consider migrating to a monorepo where the dependencies are managed centrally.

Hope this helps!

[thyco]

I am having a similar issue when migrating from module federation to native federation (20.1.6). My shell is on angular 20.2.3 my micro frontend is on 20.2.4. This gives the same error, but in our case it seems to be caused by the router :

ERROR RuntimeError: NG0203: The InjectionToken router duplicate forRoot guardtoken injection failed.inject()function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used withrunInInjectionContext. Find more at https://angular.dev/errors/NG0203

Am I correct to understand that we should match the angular versions even on the patch version? On module federation this was never an issue.

[Aukevanoost]

Unfortunately that is really hard to say, it really depends on your code setup. I noticed the "duplicate forRoot" message, I found a similar thread here? Could it be that you're calling the forRoot in the host as well as the remote?

https://stackoverflow.com/questions/79681634/error-ng0203-the-injectiontoken-router-duplicate-forroot-guard-token-injectio

[thyco]

That's what I thought as well, but I did a search on forRoot and it was only used in the shell.

We're going to do some further investigation and if no fix is found, we'll probably just agree on a version for angular. All our shells and micro frontends are part of the same organisation, just spread out in different teams.

[Aukevanoost]

PR #645 has a nice detailed explanation about it.
In general if your remote contains a different version than your host, but you load the remote module into the host like an general Angular module, then it might happen that incompatibilities are found at the seams at runtime. I'm not saying that is the issue here, this is a very generic issue which could be caused by multiple things. To avoid this you could go for a webcomponent solution where micro frontends are bootstrapped as custom elements. Or a monorepo setup.

Does bumping your shell to 20.2.4 fix the issue? (edit, I reproduced the setup and indeed it seems to break under your conditions, host 20.2.3 and remote 20.2.4)

[manfredsteyer]

The thing is, when we cannot guarantee that we have the same Angular version everywhere, we need a setup like this one:

https://www.angulararchitects.io/blog/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components/

As compiled Angular code uses Angular's private API, we don't have guarantees in terms of semver.

Best wishes,
Manfred