Webpack Module Federation Unsatisfied version 11.x.x of shared singleton module @angular/common (required ^7.2.0)

Question

I am trying to get my rather complicated monolithic app to work with Module Federation. My webpack config looks like that

   plugins: [
    new ModuleFederationPlugin({
        remotes: {
            "mfe1": "mfe1@http://localhost:3000/remoteEntry.js",
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true },
          "@angular/common": { singleton: true, strictVersion: true },
          "@angular/router": { singleton: true, strictVersion: true },
          ...sharedMappings.getDescriptors()
        }
    }),
    sharedMappings.getPlugin(),
  ],

Shared is same on the Micro Frontend side. When i try to run the application i get:

Error: Unsatisfied version 11.2.1 of shared singleton module @angular/common (required ^7.2.0)

Before that i got an similar error message but for angular/core. I fixed that by rerunning yarn and fixing all the warnings produced by libraries depending on a different angular/core version.

But with the error fpr angular/common I am stuck. I have no idea how to find out which library could possibly produce that error.

Answer 1

You probably should specify requiredVersion on each of those shared items. If you don't specify it, webpack will attempt to determine the versions not only from your main package.json, but also from any npm package that uses those angular libraries in your node_modules.

What will happen is whenever you import a third-party module that uses angular, it will scan the package.json for that module and add another entry version range mapping based on that. This will probably caused unwanted behavior and may be the cause for what you are seeing.

Answer 2

At the moment you've got singleton: true which overwrites different packages versions. One option is to have same version of package across all microfrontends and the second one is that u can slightly change shared syntax. Try something like this: shared: [ "@angular/core", "@angular/common", "@angular/router", ...sharedMappings.getDescriptors() ]