Shared library in module federation: how to provide it?

Question

I have setup a project with module federation:

module.exports = {
output: {
    uniqueName: "my-mfe",
    publicPath: "auto"
},
optimization: {
    runtimeChunk: false
},
resolve: {
    alias: {
        ...sharedMappings.getAliases()
    }
},
plugins: [
    new ModuleFederationPlugin({
        name: "my-mfe",
        filename: "remoteEntry.js",
        exposes: {
            "./Module": "./src/app/mymfe/mymfe.module.ts"
        },

        shared: share({
            "@angular/core": {
                singleton: true,
                strictVersion: true,
                requiredVersion: "auto",
                eager: true //true means it will be in my remoteEntry.js
            },
            ...sharedMappings.getDescriptors()
         }),
         sharedMappings.getPlugin()
      ]};

As you can see each micro-frontend has the angular core shared (along with other libs). Now, if I put eager=true it works but the library gets inside of the remoteEntry.js file which is bad as the size will increase (of course).

But, if I put eager=false, how can the code retrieve the library when needed? Where the library would be, in the first place? I can't find any "exposes" section for libraries.

Answer 1

There is active webpack bug regarding that. https://github.com/webpack/webpack/issues/15164

I use following approach with requiredVersion:

shared: {
        "@angular/core": {requiredVersion: '13.1.1'},
        "@angular/common": {requiredVersion: '13.1.1'},
        "@angular/router": {requiredVersion: '13.1.1'},
        "rxjs": {requiredVersion: '6.6.0'},
        "rxjs/operators": {requiredVersion: '6.6.0'},
      }

In order to see efficiency in bundle, you can turn on

"namedChunks": true

you gonna see that they are loaded once.