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

JonWallsten · 2023-09-12T13:17:33Z

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:
#17696
And/or maybe this issue:
angular/angular#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

clone repo
npm i
npx nx serve host

Or from scratch:

npx create-nx-workspace debug
npx nx migrate latest
npx nx g @nx/angular:host host
npx nx g @nx/angular:remote remote --host=host
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

Windows

Additional Information

The text was updated successfully, but these errors were encountered:

JonWallsten · 2023-09-13T05:41:10Z

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 · 2023-09-21T15:05:56Z

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 · 2023-10-06T05:13:38Z

@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: module-federation/core#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 · 2023-10-09T09:00:30Z

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 · 2023-10-09T10:21:29Z

After adding @angular/core and @angular/router manually here before building the remote:

nx/packages/angular/src/utils/mf/utils.ts

Lines 109 to 118 in dde9106

    
           const npmPackages = sharePackages( 
        
             Array.from( 
        
               new Set([ 
        
                 ...DEFAULT_ANGULAR_PACKAGES_TO_SHARE, 
        
                 ...dependencies.npmPackages.filter( 
        
                   (pkg) => !DEFAULT_NPM_PACKAGES_TO_AVOID.includes(pkg) 
        
                 ), 
        
               ]) 
        
             ) 
        
           );

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 · 2023-10-09T11:45:36Z

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 · 2024-02-05T14:52:08Z

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 · 2024-02-08T13:25:49Z

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 · 2024-02-08T13:33:12Z

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 · 2024-02-08T16:00:42Z

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 · 2024-02-14T23:02:35Z

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

burakoztirpan · 2024-03-06T13:30:25Z

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 · 2024-03-07T14:05:09Z

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 · 2024-03-21T13:13:06Z

any updates?

JangoCG · 2024-04-04T11:15:09Z

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

ErmolaevID · 2024-04-08T06:08:34Z

any updates? same on mac machine

ErmolaevID · 2024-04-08T06:39:11Z

Reinstall node_modules helped me

my config

Nesho-Developer · 2024-04-08T08:29:33Z

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 <#19121 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKIXF7TXKBHXAHYF2JO5P43Y4I3SLAVCNFSM6AAAAAA4U3B5W6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBRHE3TAOBRGA> . You are receiving this because you commented.Message ID: ***@***.***>

adacostac · 2024-04-26T12:17:03Z

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 · 2024-05-17T08:35:28Z

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.

…kage #19121

…kage #19121 (#23464)     ## Current Behavior  In our Module Federation utils for Angular, we set some packages that should always be shared. This array was missing `@angular/core` which should be shared at all times for DI to function as expected ## Expected Behavior  Ensure `@angular/core` is shared ## Related Issue(s)  Fixes #19121

…kage #19121 (#23464)     ## Current Behavior  In our Module Federation utils for Angular, we set some packages that should always be shared. This array was missing `@angular/core` which should be shared at all times for DI to function as expected ## Expected Behavior  Ensure `@angular/core` is shared ## Related Issue(s)  Fixes #19121 (cherry picked from commit 4315e91)

github-actions · 2024-06-17T00:11:41Z

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.

JonWallsten added the type: bug label Sep 12, 2023

AgentEnder added the scope: angular Issues related to Angular support in Nx label Sep 13, 2023

Coly010 added blocked: third-party os: windows Issues that can only be replicated on Windows labels Sep 21, 2023

JeanMeche mentioned this issue Oct 6, 2023

NG0203: inject() must be called from an injection context such as a constructor angular/angular#52067

Closed

JonWallsten mentioned this issue Oct 10, 2023

External dependencies missing in projectGraph on Windows #19520

Open

4 tasks

FrozenPandaz assigned Coly010 May 15, 2024

Coly010 added a commit that referenced this issue May 17, 2024

fix(angular): @angular/core should always be provided as a shared pac…

4bf3932

…kage #19121

Coly010 mentioned this issue May 17, 2024

fix(angular): @angular/core should always be provided as a shared package #19121 #23464

Merged

Coly010 closed this as completed in #23464 May 17, 2024

github-actions bot added the outdated label Jun 17, 2024

github-actions bot locked as resolved and limited conversation to collaborators Jun 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

JonWallsten commented Sep 12, 2023 •

edited

Loading

JonWallsten commented Sep 13, 2023 •

edited

Loading

Coly010 commented Sep 21, 2023

JonWallsten commented Oct 6, 2023 •

edited

Loading

JonWallsten commented Oct 9, 2023 •

edited

Loading

JonWallsten commented Oct 9, 2023 •

edited

Loading

irowbin commented Oct 9, 2023

mchlbrnd commented Feb 5, 2024

burakoztirpan commented Feb 8, 2024

JonWallsten commented Feb 8, 2024 •

edited

Loading

burakoztirpan commented Feb 8, 2024

ryanbauer commented Feb 14, 2024 •

edited

Loading

burakoztirpan commented Mar 6, 2024

marcintokarski commented Mar 7, 2024

Nesho-Developer commented Mar 21, 2024

JangoCG commented Apr 4, 2024

ErmolaevID commented Apr 8, 2024

ErmolaevID commented Apr 8, 2024

Nesho-Developer commented Apr 8, 2024 via email

adacostac commented Apr 26, 2024 •

edited

Loading

Coly010 commented May 17, 2024

github-actions bot commented Jun 17, 2024

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

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

Comments

JonWallsten commented Sep 12, 2023 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

JonWallsten commented Sep 13, 2023 • edited Loading

Coly010 commented Sep 21, 2023

JonWallsten commented Oct 6, 2023 • edited Loading

JonWallsten commented Oct 9, 2023 • edited Loading

JonWallsten commented Oct 9, 2023 • edited Loading

irowbin commented Oct 9, 2023

mchlbrnd commented Feb 5, 2024

burakoztirpan commented Feb 8, 2024

JonWallsten commented Feb 8, 2024 • edited Loading

burakoztirpan commented Feb 8, 2024

ryanbauer commented Feb 14, 2024 • edited Loading

burakoztirpan commented Mar 6, 2024

marcintokarski commented Mar 7, 2024

Nesho-Developer commented Mar 21, 2024

JangoCG commented Apr 4, 2024

ErmolaevID commented Apr 8, 2024

ErmolaevID commented Apr 8, 2024

Nesho-Developer commented Apr 8, 2024 via email

adacostac commented Apr 26, 2024 • edited Loading

Coly010 commented May 17, 2024

github-actions bot commented Jun 17, 2024

JonWallsten commented Sep 12, 2023 •

edited

Loading

JonWallsten commented Sep 13, 2023 •

edited

Loading

JonWallsten commented Oct 6, 2023 •

edited

Loading

JonWallsten commented Oct 9, 2023 •

edited

Loading

JonWallsten commented Oct 9, 2023 •

edited

Loading

JonWallsten commented Feb 8, 2024 •

edited

Loading

ryanbauer commented Feb 14, 2024 •

edited

Loading

adacostac commented Apr 26, 2024 •

edited

Loading