Error: "inject() must be called from an injection context such as a constructor" when loading remote Angular application from host app

[JonWallsten]

Current Behavior

After migrating NX from 16.2.2 -> 16.8.1 our remote (using module federation) applications failes with this 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`

They work as standalone applications but not remotes. I.e when I go to http://locahost:4201 it loads the dashboard, but not when trying to load it as a route in our host-app.

It might be related to this issue: https://github.com/nrwl/nx/issues/17696 And/or maybe this issue: https://github.com/angular/angular/issues/51532

The module federation is setup according to the guide.

Expected Behavior

It should not fail to run the application as a remote application using module federation.

GitHub Repo

https://github.com/JonWallsten/nx-repro

Steps to Reproduce

1. clone repo
2. npm i
3. npx nx serve host

Or from scratch:

1. npx create-nx-workspace debug
2. npx nx migrate latest
3. npx nx g @nx/angular:host host
4. npx nx g @nx/angular:remote remote --host=host
5. npx nx serve host

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.14.1
   OS     : win32-x64
   npm    : 9.3.1

   nx                 : 16.8.1
   @nx/js             : 16.8.1
   @nx/jest           : 16.8.1
   @nx/linter         : 16.8.1
   @nx/workspace      : 16.8.1
   @nx/angular        : 16.8.1
   @nx/cypress        : 16.8.1
   @nx/devkit         : 16.8.1
   @nx/eslint-plugin  : 16.8.1
   @nrwl/tao          : 16.8.1
   @nx/web            : 16.8.1
   @nx/webpack        : 16.8.1
   typescript         : 5.1.6

Failure Logs

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 (core.mjs:731:15)
    at Module.ɵɵinject (core.mjs:744:60)
    at Object._class6_Factory [as factory] (common.mjs:67:84)
    at core.mjs:9412:43
    at runInInjectorProfilerContext (core.mjs:694:9)
    at R3Injector.hydrate (core.mjs:9411:17)
    at R3Injector.get (core.mjs:9281:33)
    at injectInjectorOnly (core.mjs:738:40)
    at ɵɵinject (core.mjs:744:60)
    at inject (core.mjs:828:12)

Package Manager Version

9.3.1

Operating System

• [X] Windows

Additional Information

[JonWallsten]

I even tried to use the new loadRemoteModule from @nx/angular/mf following this guide: https://nx.dev/recipes/angular/dynamic-module-federation-with-angular

But I still get the same error:

core.mjs:11458 ERROR Error: Uncaught (in promise): 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
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 (core.mjs:731:15)
    at Module.ɵɵinject (core.mjs:744:60)
    at Object._class21_Factory [as useFactory] (router.mjs:425:84)
    at Object.factory (core.mjs:9511:38)
    at core.mjs:9412:43
    at runInInjectorProfilerContext (core.mjs:694:9)
    at R3Injector.hydrate (core.mjs:9411:17)
    at R3Injector.get (core.mjs:9281:33)
    at injectInjectorOnly (core.mjs:738:40)
    at ɵɵinject (core.mjs:744:60)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10655:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10655:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:10968:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)

I've added that repro here: https://github.com/JonWallsten/nx-repro/tree/dynamic

[Coly010]

I cloned the repo and couldn't reproduce this on macOs confirming it is potentially a windows issue with MF.

There is a known issue around using MF with Windows

[JonWallsten]

@Coly010: What would be a reasonable next step in this? Do I report a bug at the "third-party"? Can I help debug somehow?

Edit: I saw your bug here: https://github.com/module-federation/universe/issues/1240 Did you have time to try it out yet?

Edit2: I can confirm it works fine on Mac.

Edit3: Maybe a stupid question, but I can't see the @module-federation/node is even added in my node_modules. But I can see that you have a require here new (require('@module-federation/node').UniversalFederationPlugin)({ Is it just used in certain cases?

[JonWallsten]

I found some differences in the remoteEntry that I guess explains it: nx@16.2.2

var moduleMap = {
    "./Module": () => {
        return Promise.all([__webpack_require__.e("default-webpack_sharing_consume_default_angular_common_angular_common"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_core_angular_core"), __webpack_require__.e("default-apps_remote_src_app_remote-entry_entry_module_ts"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_router_angular_router")]).then(() => (() => ((__webpack_require__(/*! apps/remote/src/app/remote-entry/entry.module.ts */ 9600)))));
    }

nx@16.8.1

var moduleMap = {
    "./Module": () => {
        return Promise.all([__webpack_require__.e("default-node_modules_angular_core_fesm2022_core_mjs"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_common_angular_common"), __webpack_require__.e("default-node_modules_angular_router_fesm2022_router_mjs"), __webpack_require__.e("default-apps_remote_src_app_remote-entry_entry_module_ts")]).then(() => (() => ((__webpack_require__(/*! apps/remote/src/app/remote-entry/entry.module.ts */ 3514)))));
    }
};

The webpack_sharing_consume parts seems to be missing for core. But it's still there for common.

[JonWallsten]

After adding @angular/core and @angular/router manually here before building the remote: https://github.com/nrwl/nx/blob/dde91067f0ddd7bd7199f3727fc19dd4ca1f7c07/packages/angular/src/utils/mf/utils.ts#L109-L118

The application works fine again. So that begs the question: Why is @angular/core and @angular/router missing as dependencies for the remote?

Edit: I get it now. No dependecies at all is found. Common/Animations are from some kind of constant called DEFAULT_ANGULAR_PACKAGES_TO_SHARE

MfConfig {
  name: 'remote',
  exposes: { './Module': 'apps/remote/src/app/remote-entry/entry.module.ts' }
}
projectGraph {
  nodes: {
    remote: { name: 'remote', type: 'app', data: [Object] },
    host: { name: 'host', type: 'app', data: [Object] }
  },
  externalNodes: {},
  dependencies: { remote: [], host: [] },
  version: '6.0'
}
mfConfig.name remote
Dependencies { workspaceLibraries: [], npmPackages: [] }
workspaceLibraries []
npmPackages []
sharedLibraries {
  getAliases: [Function: getAliases],
  getLibraries: [Function: getLibraries],
  getReplacementPlugin: [Function: getReplacementPlugin]
}
DEFAULT_ANGULAR_PACKAGES_TO_SHARE [ '@angular/animations', '@angular/common' ]
dependencies.npmPackages []
npmPackages {
  '@angular/animations': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/animations/browser': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common/testing': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common/upgrade': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' }
}
sharedDependencies apps/remote {}
sharedDependencies {
  '@angular/animations': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/animations/browser': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common/testing': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' },
  '@angular/common/upgrade': { singleton: true, strictVersion: true, requiredVersion: '16.2.4' }
}

Same output from 16.2.2:

MfConfig {
  name: 'remote',
  exposes: { './Module': 'apps/remote/src/app/remote-entry/entry.module.ts' }
}
projectGraph {
  version: '5.1',
  nodes: {
    remote: { name: 'remote', type: 'app', data: [Object] },
    host: { name: 'host', type: 'app', data: [Object] }
  },
  externalNodes: {
    'npm:@angular/animations': { type: 'npm', name: 'npm:@angular/animations', data: [Object] },
    'npm:@angular/common': { type: 'npm', name: 'npm:@angular/common', data: [Object] },
    'npm:@angular/compiler': { type: 'npm', name: 'npm:@angular/compiler', data: [Object] },
    'npm:@angular/core': { type: 'npm', name: 'npm:@angular/core', data: [Object] },
    'npm:@angular/forms': { type: 'npm', name: 'npm:@angular/forms', data: [Object] },
    'npm:@angular/platform-browser': {
      type: 'npm',
      name: 'npm:@angular/platform-browser',
      data: [Object]
    },
    'npm:@angular/platform-browser-dynamic': {
      type: 'npm',
      name: 'npm:@angular/platform-browser-dynamic',
      data: [Object]
    },
    'npm:@angular/router': { type: 'npm', name: 'npm:@angular/router', data: [Object] },
    'npm:@nx/angular': { type: 'npm', name: 'npm:@nx/angular', data: [Object] },
    'npm:rxjs': { type: 'npm', name: 'npm:rxjs', data: [Object] },
    'npm:tslib': { type: 'npm', name: 'npm:tslib', data: [Object] },
    'npm:zone.js': { type: 'npm', name: 'npm:zone.js', data: [Object] },
    'npm:@angular-devkit/build-angular': {
      type: 'npm',
      name: 'npm:@angular-devkit/build-angular',
      data: [Object]
    },
    'npm:@angular-devkit/core': { type: 'npm', name: 'npm:@angular-devkit/core', data: [Object] },
    'npm:@angular-devkit/schematics': {
      type: 'npm',
      name: 'npm:@angular-devkit/schematics',
      data: [Object]
    },
    'npm:@angular-eslint/eslint-plugin': {
      type: 'npm',
      name: 'npm:@angular-eslint/eslint-plugin',
      data: [Object]
    },
    'npm:@angular-eslint/eslint-plugin-template': {
      type: 'npm',
      name: 'npm:@angular-eslint/eslint-plugin-template',
      data: [Object]
    },
    'npm:@angular-eslint/template-parser': {
      type: 'npm',
      name: 'npm:@angular-eslint/template-parser',
      data: [Object]
    },
    'npm:@angular/cli': { type: 'npm', name: 'npm:@angular/cli', data: [Object] },
    'npm:@angular/compiler-cli': { type: 'npm', name: 'npm:@angular/compiler-cli', data: [Object] },
    'npm:@angular/language-service': {
      type: 'npm',
      name: 'npm:@angular/language-service',
      data: [Object]
    },
    'npm:@nx/cypress': { type: 'npm', name: 'npm:@nx/cypress', data: [Object] },
    'npm:@nx/eslint-plugin': { type: 'npm', name: 'npm:@nx/eslint-plugin', data: [Object] },
    'npm:@nx/jest': { type: 'npm', name: 'npm:@nx/jest', data: [Object] },
    'npm:@nx/js': { type: 'npm', name: 'npm:@nx/js', data: [Object] },
    'npm:@nx/linter': { type: 'npm', name: 'npm:@nx/linter', data: [Object] },
    'npm:@nx/web': { type: 'npm', name: 'npm:@nx/web', data: [Object] },
    'npm:@nx/workspace': { type: 'npm', name: 'npm:@nx/workspace', data: [Object] },
    'npm:@schematics/angular': { type: 'npm', name: 'npm:@schematics/angular', data: [Object] },
    'npm:@types/jest': { type: 'npm', name: 'npm:@types/jest', data: [Object] },
    'npm:@types/node': { type: 'npm', name: 'npm:@types/node', data: [Object] },
    'npm:@typescript-eslint/eslint-plugin': {
      type: 'npm',
      name: 'npm:@typescript-eslint/eslint-plugin',
      data: [Object]
    },
    'npm:@typescript-eslint/parser': {
      type: 'npm',
      name: 'npm:@typescript-eslint/parser',
      data: [Object]
    },
    'npm:cypress': { type: 'npm', name: 'npm:cypress', data: [Object] },
    'npm:eslint': { type: 'npm', name: 'npm:eslint', data: [Object] },
    'npm:eslint-config-prettier': { type: 'npm', name: 'npm:eslint-config-prettier', data: [Object] },
    'npm:eslint-plugin-cypress': { type: 'npm', name: 'npm:eslint-plugin-cypress', data: [Object] },
    'npm:jest': { type: 'npm', name: 'npm:jest', data: [Object] },
    'npm:jest-environment-jsdom': { type: 'npm', name: 'npm:jest-environment-jsdom', data: [Object] },
    'npm:jest-preset-angular': { type: 'npm', name: 'npm:jest-preset-angular', data: [Object] },
    'npm:jsonc-eslint-parser': { type: 'npm', name: 'npm:jsonc-eslint-parser', data: [Object] },
    'npm:nx': { type: 'npm', name: 'npm:nx', data: [Object] },
    'npm:prettier': { type: 'npm', name: 'npm:prettier', data: [Object] },
    'npm:ts-jest': { type: 'npm', name: 'npm:ts-jest', data: [Object] },
    'npm:ts-node': { type: 'npm', name: 'npm:ts-node', data: [Object] },
    'npm:tsconfig-paths': { type: 'npm', name: 'npm:tsconfig-paths', data: [Object] },
    'npm:typescript': { type: 'npm', name: 'npm:typescript', data: [Object] }
  },
  dependencies: {
    remote: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ],
    host: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  }
}
mfConfig.name remote
Dependencies {
  workspaceLibraries: [],
  npmPackages: [
    '@angular/core',
    '@angular/platform-browser',
    '@angular/router',
    '@angular/common',
    '@angular/platform-browser-dynamic',
    'jest-preset-angular',
    '@nx/angular'
  ]
}
workspaceLibraries []
npmPackages [
  '@angular/core',
  '@angular/platform-browser',
  '@angular/router',
  '@angular/common',
  '@angular/platform-browser-dynamic',
  'jest-preset-angular',
  '@nx/angular'
]
sharedLibraries {
  getAliases: [Function: getAliases],
  getLibraries: [Function: getLibraries],
  getReplacementPlugin: [Function: getReplacementPlugin]
}
DEFAULT_ANGULAR_PACKAGES_TO_SHARE [ '@angular/animations', '@angular/common' ]
dependencies.npmPackages [
  '@angular/core',
  '@angular/platform-browser',
  '@angular/router',
  '@angular/common',
  '@angular/platform-browser-dynamic',
  'jest-preset-angular',
  '@nx/angular'
]
npmPackages {
  '@angular/animations': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/animations/browser': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common/upgrade': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/core/rxjs-interop': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/core/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser/animations': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/router': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/router/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/router/upgrade': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser-dynamic': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser-dynamic/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  'jest-preset-angular': { singleton: true, strictVersion: true, requiredVersion: '13.1.1' },
  '@nx/angular': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' },
  '@nx/angular/mf': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' },
  '@nx/angular/module-federation': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' },
  '@nx/angular/testing': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' }
}
sharedDependencies apps/remote {}
sharedDependencies {
  '@angular/animations': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/animations/browser': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/common/upgrade': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/core/rxjs-interop': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/core/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser/animations': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/router': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/router/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/router/upgrade': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser-dynamic': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  '@angular/platform-browser-dynamic/testing': { singleton: true, strictVersion: true, requiredVersion: '16.0.1' },
  'jest-preset-angular': { singleton: true, strictVersion: true, requiredVersion: '13.1.1' },
  '@nx/angular': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' },
  '@nx/angular/module-federation': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' },
  '@nx/angular/testing': { singleton: true, strictVersion: true, requiredVersion: '16.2.2' }
}

I guess something has changed when it comes to generating the Project graph:

So obviously something is wrong with the project graph. Think I need som help here @Coly010 ! 🙏

[irowbin]

Having the same issue.

   Node   : 16.19.1
   OS     : win32-x64
   npm    : 8.19.3

   nx (global)        : 16.4.0
   nx                 : 16.10.0
   @nx/js             : 16.10.0
   @nx/jest           : 16.10.0
   @nx/linter         : 16.10.0
   @nx/workspace      : 16.10.0
   @nx/angular        : 16.10.0
   @nx/cypress        : 16.10.0
   @nx/devkit         : 16.10.0
   @nx/eslint-plugin  : 16.10.0
   @nrwl/tao          : 16.10.0
   @nx/web            : 16.10.0
   @nx/webpack        : 16.10.0
   nx-cloud           : 16.4.0
   typescript         : 5.1.6
   -------------------------------------------------
   Community plugins:
   @ngrx/component-store                : 16.0.0
   @ngrx/effects                        : 16.0.0
   @ngrx/entity                         : 16.0.0
   @ngrx/router-store                   : 16.0.0
   @ngrx/schematics                     : 16.0.0
   @ngrx/store                          : 16.0.0
   @ngrx/store-devtools                 : 16.0.0

Is there a workaround for this fix? I was logging by doing:

shared: (name) => {
  // shows all the packages angular core, router etc.,
}

but not sure if there are things that may be stated by @JonWallsten regarding Angular?

Thanks. 🙂

[mchlbrnd]

Same issue on 18.0.0

 >  NX   Report complete - copy this into the issue template

   Node   : 18.16.1
   OS     : win32-x64
   npm    : 9.5.1

   nx                 : 18.0.0
   @nx/js             : 18.0.0
   @nx/jest           : 18.0.0
   @nx/linter         : 18.0.0
   @nx/eslint         : 18.0.0
   @nx/workspace      : 18.0.0
   @nx/angular        : 18.0.0
   @nx/cypress        : 18.0.0
   @nx/devkit         : 18.0.0
   @nx/eslint-plugin  : 18.0.0
   @nx/storybook      : 18.0.0
   @nrwl/tao          : 18.0.0
   @nx/web            : 18.0.0
   @nx/webpack        : 18.0.0
   typescript         : 5.3.3
   ---------------------------------------
   Community plugins:
   @storybook/angular    : 7.6.8
   @wks/forms-schematics : 0.0.14
   nx-htmlhint           : 1.0.3```

[burakoztirpan]

I am struggling with the same error, while my colleagues are able to serve the project without any problem. I tried to upgrade and downgrade the versions of both Angular and Nx, but it did not work for me. Also, I tried to copy the entirety of the node_modules from one of my teammates, but still had no luck.I don't think it's related but I also checked the ports where i need to serve the apps on

angular v 16.2.9 nx v 17.0.2 its is macosx intel 13.6.3

[JonWallsten]

I think there are multiple causes for this issue. In my case it was a missing package-lock.json files causing the graph to not pick up on the dependencies, causing shared dependencies not to work, which in turn causes multiple versions of angular-core being used at the same time, resulting in this issue.

[burakoztirpan]

I think there are multiple causes for this issue. In my case it was a missing package-lock.json files causing the graph to not pick up on the dependencies, causing shared dependencies not to work, which I turn causes multiple versions of angular-core being used at the same time, causing this issue.

i ve several angular applications with different versions and structures. i am able to serve the nx project with ng v16 and nx v16 without any problem. as for the problematic application where i get this error has ng v16.2 and nx17 v. still trying to figure out the root cause of the issue.

[ryanbauer]

I can confirm this issue is happening with Nx version 18.0.4 with a module federation project setup.

[burakoztirpan]

I think there are multiple causes for this issue. In my case it was a missing package-lock.json files causing the graph to not pick up on the dependencies, causing shared dependencies not to work, which I turn causes multiple versions of angular-core being used at the same time, causing this issue.

i ve several angular applications with different versions and structures. i am able to serve the nx project with ng v16 and nx v16 without any problem. as for the problematic application where i get this error has ng v16.2 and nx17 v. still trying to figure out the root cause of the issue.

still i could not realize the root cause of the issue but i ve managed to get it worked by installing the packages with yarn. i am guessing something was wrong with package-lock file and project graphs

[marcintokarski]

I can confirm that this issue exists on latest version(18.0.6). I have had this when I had package-lock.json included in .nxignore and excluded from namedInputs. Workaround is remove package-lock.json from those places, but in my project I have version in this file and version bumping doesn't work correctly with nx affected (too many apps/libs is affected). We need something similar to implicitDependencies to mark which sections of this file can affected, that was in previous nx versions.

[Nesho-Developer]

any updates?

[JangoCG]

Any updates on this? I have reproduced this issue on two different mac machines. so this is not windows specific

[ErmolaevID]

any updates? same on mac machine

[ErmolaevID]

Reinstall node_modules helped me

my config

[Nesho-Developer]

Fo me I setuped new workspace with latest then put the host and some remotes and it worked so maybe you should sync your workspace with latest including the dependencies

On Mon, Apr 8, 2024, 8:39 AM Ilya @.***> wrote:

Reinstall node_modules helped me

my config image.png (view on web) https://github.com/nrwl/nx/assets/57585370/82acb09f-bb08-46e4-9b2f-d0edf5705344

— Reply to this email directly, view it on GitHub https://github.com/nrwl/nx/issues/19121#issuecomment-2041970810, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKIXF7TXKBHXAHYF2JO5P43Y4I3SLAVCNFSM6AAAAAA4U3B5W6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBRHE3TAOBRGA . You are receiving this because you commented.Message ID: @.***>

[adacostac]

Buenas, he tenido el mismo problema, la solución ha sido actualizar las dependencias del proyecto a la última en su momento

El hecho es que tengo una librería desarrollada en V17 y me estaba dando este error.

Actualización [27/04/2024]

La actualización no funcionó

SOLUCIONADO Coloqué en el proyecto que consumirá la librería la siguiente propiedad en el angular.json y funcionó

"preserveSymlinks": true

[Coly010]

Hi all!

I'm sorry I missed this issue for some time.

We definitely had some issues with our lockfile parsing which is used to find dependencies of projects which would seem to be the root cause of many of the issues outlined here.

However, we have resolved that now.

As per @adacostac message, if you are using a package manager that uses symlinks (pnpm for example), you should provide preserveSymlinks

Also, you must ensure all your hosts and remotes use the same version of Angular. Unfortunately this is a restriction from Angular and not us or Module Federation. Angular relies on the singleton pattern, and therefore when there are different versions of angular packages, new instances are created which break the singleton pattern.

Something that we should have done, and I will do now, however, is to add @angular/core to the DEFAULT_ANGULAR_PACKAGES_TO_SHARE array. It was somewhat naive of me to believe that we wouldn't have to manually provide this as every single project will use @angular/core and therefore I relied on our project graph to find that package.

[github-actions[bot]]

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.