Module Federation with Angular v14 host and v15 remote throws 'inject() must be called from an injection context' error - how to resolve?

Question

Module Federation:

I'm using module federation to load remotes into my host and I have intentionally have version mismatch. The host is using Angular v14 and remotes are using Angular v15. Since there is version mismatch, when I try to load the remotes into the host, I get below error

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 EnvironmentInjector#runInContext

Host Webpack configuration

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        "mfe1": "http://localhost:4510/remoteEntry.js",    
      },
      shared: share({
        "@angular/core": { 
          singleton: false,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true },
        "@angular/common": { 
          singleton: false,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true },
        "@angular/router": { 
          singleton: false,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true },
        "@angular/common/http": { 
          singleton: false,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true }, 
      })
    })
  ]
};

Remote Webpack config

/* eslint-env es6 */
const {
  withModuleFederationPlugin,
  share,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "website-remote",
  filename: "remoteEntry.js",
  exposes: {
    "./Module": "./src/features/fabricated/fabricated.module.ts",
  },

  shared: share({
    "@angular/core": {
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    "@angular/common": {
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    "@angular/router": {
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    "@angular/common/http": {
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: true
    }, 
    "client-auth": {
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    "@ngxs/store": {
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
  }),
});

I tried all the combinations for the shared as suggested in the documentation and other articles. I want understand this error in context with module federation and try to solve it keeping the versioning difference.

Module Federation with Angular v14 host and v15 remote throws 'inject() must be called from an injection context' error - how to resolve?

0 Answers0