Nx angular dynamic mfe got NG0203 error

[mehrabix]

Current Behavior

I had no issuse since i used nx mfe with angular 15,
but i tried to migrate to angular 18 and got this error when navigating from shell (host) app to another mfe
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.dev/errors/NG0203
i also saw this topic
#19121
and then i tried it on my two envirements which is a windows system and debian linux, and in both cases got the same error.

Expected Behavior

Navigating between mfes without any issue

GitHub Repo

https://github.com/mehrabix/nx-angular-mfe

Steps to Reproduce

clone this repo
https://github.com/mehrabix/nx-angular-mfe

do npm i

run this command:
npx nx serve shell --devRemotes="first-microfront,second-microfront"
Navigate between mfes
you will get NG0203 error on console

another clue:

Clone this repository (it's mentioned in the Angular MFE tutorial: https://nx.dev/recipes/angular/dynamic-module-federation-with-angular):

https://github.com/Coly010/nx-ng-dyn-fed

Run:
npx nx serve employee --devRemotes="dashboard,todo,login"
navigate between remote links
The Angular version is 18.0.4, and it works perfectly.
Then, run this in order to migrate to Angular 18.1.2. It will migrate successfully:
nx migrate latest

After that, run:
npx nx serve employee --devRemotes="dashboard,todo,login"
again.
navigate between remote links
It will not work anymore, and you will get the NG0203 error.

Nx Report

Node   : 22.5.1
OS     : linux-x64
npm    : 10.8.2

nx (global)        : 19.5.3
nx                 : 19.5.3
@nx/js             : 19.5.3
@nx/linter         : 19.5.3
@nx/eslint         : 19.5.3
@nx/workspace      : 19.5.3
@nx/angular        : 19.5.3
@nx/devkit         : 19.5.3
@nx/eslint-plugin  : 19.5.3
@nrwl/tao          : 19.5.3
@nx/web            : 19.5.3
@nx/webpack        : 19.5.3
typescript         : 5.5.4

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[mohan5070]

I am also getting same error "Error: NG0203: inject() must be called from an injection context such as a constructor".
After upgraded my Nx 16 to 19

Nx Report:

Node : 20.14.0
OS : darwin-x64
Native Target : x86_64-macos
npm : 10.7.0

nx (global) : 19.5.6
nx : 19.5.6
@nx/js : 19.5.6
@nx/jest : 19.5.6
@nx/linter : 19.5.6
@nx/eslint : 19.5.6
@nx/workspace : 19.5.6
@nx/angular : 19.5.6
@nx/cypress : 19.5.6
@nx/devkit : 19.5.6
@nx/eslint-plugin : 19.5.6
@nrwl/tao : 19.5.6
@nx/web : 19.5.6
@nx/webpack : 19.5.6
typescript : 5.5.4

[sorozco653]

Im also seeing the same issue on the latest v19.6.0. I had to downgrade to v19.4.4 for dynamic federation to work. I have notice by default that when we upgrade to >=v19.5.0, it automatically uses the new module/federation-enhance. Is there something we need to do in our module federation config to adhere to the new mf-enchance version ?

Node           : 20.12.2
OS             : darwin-arm64
Native Target  : aarch64-macos
yarn           : 1.22.22

nx (global)        : 19.5.6
nx                 : 19.6.0
@nx/js             : 19.6.0
@nx/jest           : 19.6.0
@nx/linter         : 19.6.0
@nx/eslint         : 19.6.0
@nx/workspace      : 19.6.0
@nx/angular        : 19.6.0
@nx/devkit         : 19.6.0
@nx/eslint-plugin  : 19.6.0
@nx/playwright     : 19.6.0
@nrwl/tao          : 19.6.0
@nx/vite           : 19.6.0
@nx/web            : 19.6.0
@nx/webpack        : 19.6.0
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.