NG0203, NG0200 : Errors on upgrading to NG18 and native-federation 18.1.2

[ratsey]

Today I upgraded to NG18 (specifically 18.2.0) and native-federation 18.1.2. All was working prior to the upgrade.

Now on loading my shell application I get an error:

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
    at injectInjectorOnly (_angular_core.MLRUh0DjMK-dev.js:658:11)
    at ɵɵinject (_angular_core.MLRUh0DjMK-dev.js:668:59)
    at Object.factory (_angular_core.MLRUh0DjMK-dev.js:16071:45)
    at core.mjs:3132:35
    at runInInjectorProfilerContext (core.mjs:866:5)
    at R3Injector.hydrate (core.mjs:3131:11)
    at R3Injector.get (core.mjs:3005:23)
    at definition.getStandaloneInjector (_angular_core.MLRUh0DjMK-dev.js:16078:27)
    at ComponentFactory.create (core.mjs:16496:53)
    at ViewContainerRef2.createComponent (core.mjs:16960:43)

I'm not directly injecting anything out of context in my code.

Also, when accessing a remote application, I get a circular dependency error:

Error: NG0200: Circular dependency in DI detected for _StandaloneService. Find more at https://angular.dev/errors/NG0200
    at throwCyclicDependencyError (core.mjs:964:9)
    at R3Injector.hydrate (core.mjs:3127:9)
    at R3Injector.get (core.mjs:3005:23)
    at definition.getStandaloneInjector (_angular_core.MLRUh0DjMK-dev.js:16078:27)
    at ComponentFactory.create (core.mjs:16496:53)
    at ViewContainerRef2.createComponent (core.mjs:16960:43)
    at _RouterOutlet.activateWith (router.mjs:2635:31)
    at _RouterOutlet.initializeOutletWithName (router.mjs:2569:14)
    at _RouterOutlet.ngOnInit (router.mjs:2553:10)
    at callHookInternal (core.mjs:5004:10)

My federation configs are all very vanilla:

...
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
...

I'm running a mono repo so shell and remote apps are all within the same project and compiled with NG 18.

Edit: add package.json versions:

  "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/cdk": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/platform-server": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@angular/ssr": "^18.2.0",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "chart.js": "^4.4.3",
    "es-module-shims": "^1.5.12",
    "express": "^4.18.2",
    "font-awesome": "^4.7.0",
    "ngx-cookie-service": "^18.0.0",
    "primeicons": "^7.0.0",
    "primeng": "^17.18.9",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "xml-to-json-util": "^1.0.1",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-architects/native-federation": "^18.1.2",
    "@angular-devkit/build-angular": "^18.2.0",
    "@angular-eslint/builder": "18.3.0",
    "@angular-eslint/eslint-plugin": "18.3.0",
    "@angular-eslint/eslint-plugin-template": "18.3.0",
    "@angular-eslint/schematics": "18.3.0",
    "@angular-eslint/template-parser": "18.3.0",
    "@angular/cli": "^18.2.0",
    "@angular/compiler-cli": "^18.2.0",
    "@softarc/eslint-plugin-sheriff": "^0.16.1",
    "@softarc/sheriff-core": "^0.16.1",
    "@types/express": "^4.17.17",
    "@types/jest": "^29.5.12",
    "@types/node": "^22.3.0",
    "@types/webpack-env": "^1.18.5",
    "@typescript-eslint/eslint-plugin": "^8.0.0",
    "@typescript-eslint/parser": "^8.0.0",
    "angular-eslint": "18.3.0",
    "eslint": "^9.8.0",
    "jest": "^29.7.0",
    "jest-preset-angular": "^14.2.2",
    "ng-mocks": "^14.13.0",
    "ng-packagr": "^18.2.0",
    "primeflex": "^3.3.1",
    "ts-jest": "^29.2.4",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.1.0"
  }

[ErikBuhre]

I have run into the same Problem, and at first thought it might be due to a mismatch in versions between the frontend and the shell. But that wasn't the case.

The problem only occurs once I bump Angular to version 18.2.0.

[klerick]

@manfredsteyer

I have the same problem
if I use angular@18.2.0 and last version of native federation a have severa angular core in my application

but in version angular@18.2.0 and native-federation@18.0.2

upd:

but if only build and use simple static server - no problem

update again:)

the problem is here:

in this commit, this is function allow 3 arguments

if remove { write: false } work correct

[uttamvs-rp]

I'm in the same boat. Has anyone figured out a solution to this?

[uttamvs-rp]

I'm using Angular to version 18.1.0

[rlarac]

Just to add that using Nx 19.6.0 (Angular ~18.2.0) the 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' the error appears when I serve the host application.

Using Nx 19.5.7 (Angular ~18.1.0) the host works! (at least with the basic configuration).

[kruczjak]

Hi, I can confirm that fix described in #621 (comment) works.

Running:

on Linux:
sed -i 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js

on MacOS:
sed -i '' 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js

Fixes the problem (at least temporarily).

[kudarias]

same issue here and temporary solution works from @klerick, please fix as soon as possible, if it is possible. thx.

Update: remove write: false has impact on old fashion imported libs -> like boostrap v4 or firebase without @angular/fire implementation, what was problem on version native federation v17. So you resolve one and have to resolve other.
Update 2: solution has impact on @angular/fire implementation too

[danimaiochi]

After spending so much time trying to figure out what I've done wrong with my new angular 18 app, I've cloned the nf-standalone-solution and upgraded from 17 (working) to 18, which resulted in the problem again.

I've then changed the version to 18.1 and 18.0 but always the same problem.
Can anyone help me? I seem to be the only one having this problem on any version of 18.

Thanks!

[elvysmarcos]

I temporarily solved the problem with Krupczak's recommendation, in this case I updated everything to the latest version, but before that, I deleted the node_modules folder, installed it again and then ran the command

[kudarias]

After spending so much time trying to figure out what I've done wrong with my new angular 18 app, I've cloned the nf-standalone-solution and upgraded from 17 (working) to 18, which resulted in the problem again.

I've then changed the version to 18.1 and 18.0 but always the same problem. Can anyone help me? I seem to be the only one having this problem on any version of 18.

Thanks!

we have to wait on @manfredsteyer solution man or will be fixed by angular team

[danimaiochi]

Hi, I can confirm that fix described in #621 (comment) works.

Running:

on Linux: sed -i 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js

on MacOS: sed -i '' 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js

Fixes the problem (at least temporarily).

If you want to do this on Windows, you can use the Git Bash cmd and run the linux command

[alaindeurveilher]

Yep, that worked for me too. It was due to that breaking change in Angular 18.2.0. So as suggested by others:, I patched the builder.js file:

  "scripts": {
    "ng": "ng",
    "workaround:patch:nf": "sed -i 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js",
    "start": "yarn workaround:patch:nf && ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

[tonybrasunas-greenlots]

Thanks @alaindeurveilher
This script is working for me too.
But slight tweak so it works on Mac:

"workaround": sed -i '' 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js",

[markusahrweileramcon]

In case you want to replace it, using javascript:

import { readFileSync, writeFileSync } from 'node:fs';

const path = './node_modules/@angular-architects/native-federation/src/builders/build/builder.js';

const data = readFileSync(path).toString();

writeFileSync(path, data.replace(/\{ write: false }, /, ''));

[ToraTengu]

We have the same issue but decided to go the other way.

We are keeping the versions of angular and native-fedetarion both at ~18.0.x. It was what we used, at the time, for the prototype so we know that it works.

IMHO, patching the package in the node_modules is not worth the work/risk... To many situations were you can end up having to re-patch the file: new version still with the bug or a full re-install of the node_modules packages...

[kudarias]

We have the same issue but decided to go the other way.

We are keeping the versions of angular and native-fedetarion both at ~18.0.x. It was what we used, at the time, for the prototype so we know that it works.

IMHO, patching the package in the node_modules is not worth the work/risk... To many situations were you can end up having to re-patch the file: new version still with the bug or a full re-install of the node_modules packages...

native federation 18.1.2 and angular 18.1.* works

[kudarias]

so after days of investigation i found out, that the problem is just @angular/build library -> 18.2.* is problematic, so this library has to be version 18.1.* , others could be 18.* .
side effects: if you using @angular/fire@18 (analytics), it will stop work, because it works with just @angular/build@18.2.* and without upper workaround

[ToraTengu]

so after days of investigation i found out, that the problem is just @angular/build library -> 18.2.* is problematic, so this library has to be version 18.1.* , others could be 18.* . side effects: if you using @angular/fire@18 (analytics), it will stop work, because it works with just @angular/build@18.2.* and without upper workaround

Sounds great! Ill have a colleague update the prototype with these versions and test it out...

[manfredsteyer]

Hi,

thanks for pointing this out.

I was able to reproduce this issue.

I'm wondering why removing { write: false } helps. I currently don't see the connection.

[manfredsteyer]

Ah, I got it: The signature of buildApplicationInternal changed. This parameter does not exist anymore.

Big thanks for pointing this out. I'll make a new version ready.

[manfredsteyer]

Just published a new Version: 18.2.1

[gigadie]

Hi @manfredsteyer

sed -i 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js

I still had to do this, it didn't help me installing the version 18.2.3.

"@angular-architects/native-federation": "^18.2.3",
"@angular/animations": "~19.0.1",
"@angular/cdk": "~19.0.1",
"@angular/common": "~19.0.1",
"@angular/compiler": "~19.0.1",
"@angular/core": "~19.0.1",
"@angular/forms": "~19.0.1",
"@angular/material": "~19.0.1",
"@angular/platform-browser": "~19.0.1",
"@angular/platform-browser-dynamic": "~19.0.1",
"@angular/router": "~19.0.1",

this is my setup

[marcodemoja]

Hi @manfredsteyer

sed -i 's/{ write: false },//' node_modules/@angular-architects/native-federation/src/builders/build/builder.js

I still had to do this, it didn't help me installing the version 18.2.3.

"@angular-architects/native-federation": "^18.2.3",
"@angular/animations": "~19.0.1",
"@angular/cdk": "~19.0.1",
"@angular/common": "~19.0.1",
"@angular/compiler": "~19.0.1",
"@angular/core": "~19.0.1",
"@angular/forms": "~19.0.1",
"@angular/material": "~19.0.1",
"@angular/platform-browser": "~19.0.1",
"@angular/platform-browser-dynamic": "~19.0.1",
"@angular/router": "~19.0.1",

this is my setup

same here

[danimaiochi]

@gigadie and @marcodemoja you guys are clearly using angular 19 with native-federation 18.2, it would only work with luck.
either go back to angular 18.2 or wait for the native-federation 19.

source: https://www.npmjs.com/package/@angular-architects/native-federation (check versions)

[marcodemoja]

@danimaiochi sorry I forgot to mention that I am using angular v18.2.* . I can't copy/past the content of my package-lock.json file unfortunately but I have just checked the angular version of all the mfe and shell app before commenting on this issue

update:
I just fixed by cleaning npm cache and reinstalling all the packages for each app so probably the problem was rightly related to the fact that I had to downgrade angular-cli days ago to version 18 to make things working as you mentioned.

[danimaiochi]

@marcodemoja try deleting your package-lock, node_modules folder and doing a npm install, I had some issues where it was getting previous cached versions from my tests, once I cleared everything..
oh, just saw your update, brilliant!

[marcodemoja]

yep, exactly as I mentioned :) thanks!

[markusahrweileramcon]

In the meantime, I also checked, if the version 18.2.1 had the "bug" fixed :D

[gigadie]

@gigadie and @marcodemoja you guys are clearly using angular 19 with native-federation 18.2, it would only work with luck. either go back to angular 18.2 or wait for the native-federation 19.

source: https://www.npmjs.com/package/@angular-architects/native-federation (check versions)

Hi, oh yeah, I did upgrade to Angular 19 because I saw that this #696 was closed and suggested it was all working fine and the stack here was:

Versions of Native/Module Federation, Angular, Node, Browser, and operating system
Native Federation: ^18.2.2
Angular: 19.0.0
OS: Windows

So I thought Native Federation 18.2.x should work with Angular 19.x.x - if that's not the case we should reopen the request to support Angular 19, and maybe provide with an ETA if available.

Thank you guys