With Angular module federation, how can I configure my shell and child apps to use different versions of the same library?

Question

I'm using Angular 14 and module federation. In my shell application, I'm using this library

"my-common-lib": "^0.0.10",

I load a child application using this in my routes

  {
    path: 'products',
    loadChildren: () =>
        loadRemoteModule({
            type: 'module',
            remoteEntry: 'http://localhost:8085/remoteEntry.js',
            exposedModule: './start'
        })
        .then(m => m.MyProductsModule)
  },

but I'm getting this error

ERROR Error: Uncaught (in promise): Error: Unsatisfied version 0.0.10 from parentApp of shared singleton module my-common-lib (required =0.0.15)

probably because in my child application, I have this version of the shared library

"my-common-lib": "^0.0.15",

and this is my webpack.config.js file from my child app

module.exports = withModuleFederationPlugin({

  name: 'customer',
  
  exposes: {
    './start':'./src/app/myProducts/myProducts.module.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

Is there a way to have each use their own version of the library? I basically would like to isolate the child functinality from the parent but not sure how to do it or if this is possible.

Moufeed Juboqji · Answer 1 · 2023-04-03T18:10:54.397

Try this

module.exports = withModuleFederationPlugin({

  name: 'customer',
  
  exposes: {
    './start':'./src/app/myProducts/myProducts.module.ts'
  },

  shared: {
    'my-common-lib-custom': {
      singleton: true,
      strictVersion: true,
      requiredVersion: '^0.0.15'
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

import { myCommonLibCustom as myCommonLib } from 'my-common-lib-custom';

if not working try to use the shareScope option. This option creates a new namespace for shared modules

With Angular module federation, how can I configure my shell and child apps to use different versions of the same library?

1 Answers1