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

Question

I'm trying to access a remote Angular microfronent configured with Native Federation, but error is thrown:

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 `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (_angular_core-17_3_10-dev.js:677:11)
    at ɵɵinject (_angular_core-17_3_10-dev.js:687:59)
    at Object.factory (_angular_core-17_3_10-dev.js:15386:45)
    at _angular_core-17_2_1-dev.js:3053:33
    at runInInjectorProfilerContext (_angular_core-17_2_1-dev.js:2052:5)
    at R3Injector.hydrate (_angular_core-17_2_1-dev.js:3052:9)
    at R3Injector.get (_angular_core-17_2_1-dev.js:2946:23)
    at definition.getStandaloneInjector (_angular_core-17_3_10-dev.js:15393:27)
    at ComponentFactory.create (_angular_core-17_2_1-dev.js:10017:51)
    at ViewContainerRef2.createComponent (_angular_core-17_2_1-dev.js:10318:43)

The error is showing when I call the remote component, I am not making use of inject in any project. I've created two projects with the command ng new app, both are standalone components, I followed the tutorial of the Native Federation page but I still received this error. I created my shell that calls my remote http://localhost:4201/RemoteEntry.json.

Answer 1

Two different version of Angular are used:

• _angular_core-17_2_1-dev.js for the shell,
• and _angular_core-17_3_10-dev.js for the micro frontend.

This setup will not work.

If you want to mix and match different Angular versions, you need to wrap the mfes into web components (or other abstractions) and load them via a wrapper. -- Manfred Steyer Source