search

angular-architects / module-federation-plugin

MIT License
713 stars 191 forks source link

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

Closed ratsey closed 1 day ago

ratsey commented 4 weeks ago

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 commented 4 weeks ago

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 commented 4 weeks ago

@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 image but in version angular@18.2.0 and native-federation@18.0.2

image

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 commented 4 weeks ago

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

uttamvs-rp commented 4 weeks ago

I'm using Angular to version 18.1.0

rlarac commented 3 weeks ago

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 commented 3 weeks ago

Hi, I can confirm that fix described in https://github.com/angular-architects/module-federation-plugin/issues/621#issuecomment-2293351616 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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 day ago

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 commented 1 day ago

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 commented 1 day ago

Just published a new Version: 18.2.1