module federation doesn't work without sharing

[koshdim]

in your example, if I remove sharing from remote and host like this

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  shared: {
  },

});

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'mfe1',

  exposes: {
    './Module': './projects/mfe1/src/app/flights/flights.module.ts',
  },

  shared: {
  },

});

I get this error:

ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context (a constructor, a factory function or a field initializer). Find more at https://angular.io/errors/NG0203
RuntimeError@http://localhost:3000/projects_mfe1_src_app_flights_flights_module_ts.js:11570:5
injectInjectorOnly@http://localhost:3000/projects_mfe1_src_app_flights_flights_module_ts.js:17038:11
ɵɵinject@http://localhost:3000/projects_mfe1_src_app_flights_flights_module_ts.js:17049:59
RouterModule_Factory@http://localhost:3000/projects_mfe1_src_app_flights_flights_module_ts.js:56820:77
factory@http://localhost:5000/projects_shell_src_bootstrap_ts.js:25988:32
hydrate@http://localhost:5000/projects_shell_src_bootstrap_ts.js:25880:29
get@http://localhost:5000/projects_shell_src_bootstrap_ts.js:25762:23
injectInjectorOnly@http://localhost:5000/projects_shell_src_bootstrap_ts.js:20526:29
ɵɵinject@http://localhost:5000/projects_shell_src_bootstrap_ts.js:20531:59
useValue@http://localhost:5000/projects_shell_src_bootstrap_ts.js:25481:33
resolveInjectorInitializers@http://localhost:5000/projects_shell_src_bootstrap_ts.js:25805:9
NgModuleRef@http://localhost:5000/projects_shell_src_bootstrap_ts.js:40872:22
create@http://localhost:5000/projects_shell_src_bootstrap_ts.js:40907:12
loadChildren/loadRunner<@http://localhost:5000/projects_shell_src_bootstrap_ts.js:67153:36
_next@http://localhost:5000/projects_shell_src_bootstrap_ts.js:2819:29
next@http://localhost:5000/projects_shell_src_bootstrap_ts.js:1272:12
notifyNext@http://localhost:5000/projects_shell_src_bootstrap_ts.js:2989:22
_next@http://localhost:5000/projects_shell_src_bootstrap_ts.js:1727:17
next@http://localhost:5000/projects_shell_src_bootstrap_ts.js:1272:12
subscribeToPromise/</<@http://localhost:5000/projects_shell_src_bootstrap_ts.js:4470:18
3484/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:5000/polyfills.js:8113:160
onInvoke@http://localhost:5000/projects_shell_src_bootstrap_ts.js:45573:25
3484/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:5000/polyfills.js:8113:48
3484/</Zone$1</Zone</Zone.prototype.run@http://localhost:5000/polyfills.js:7839:37
scheduleResolveOrReject/<@http://localhost:5000/polyfills.js:9259:28
3484/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:5000/polyfills.js:8146:173
onInvokeTask@http://localhost:5000/projects_shell_src_bootstrap_ts.js:45561:25
3484/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:5000/polyfills.js:8146:56
3484/</Zone$1</Zone</Zone.prototype.runTask@http://localhost:5000/polyfills.js:7896:39
drainMicroTaskQueue@http://localhost:5000/polyfills.js:8362:25

how can I make it work without sharing components?

[JP-Jagadesan]

Hi Koshdim, I am also kind of stuck at the same place. Were you able to get any solution for the same. If yes, please do share the repective docs or links.

Regards, Jagadesan

[koshdim]

@JP-Jagadesan , unfortunately no, have to use sharing in my projects for now

[diego-rapoport]

I had the same problema without shared!! Just saying that, for now, it's a must go to work. I'm using Angular 15.

[manfredsteyer]

Yes, you'll get this error in this very case. Because now, each MF comes with its own Angular, however, Angular is only bootstrapped once.

If you really want each MF to have its own Angular version, you need to bootstrap Angular once per MF. This happens automatically when wrapping the Angular apps as web components with Angular Elements. Please find some examples for this here: https://www.npmjs.com/package/@angular-architects/module-federation-tools