Angular Module Federation -- Shared module is not available for eager consumption

Question

Getting this issue when trying to run tests on my Angular microfrontend to use inside Module Federation. Angular 12, Webpack 5.

Uncaught Error: Shared module is not available for eager consumption: 5487

How to configure eager consumption for these modules?

score 0 · Answer 1 · answered Oct 26 '21 at 17:08

In most cases, solve this issue by setting eager: true on your shared common Angular modules:

        
shared: share({
  "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
  "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
  "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
  "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },

score 0 · Accepted Answer · answered Oct 27 '21 at 23:18

Create a separate webpack.conf for testing

You can set all shared modules to eager: true in your primary webpack.config.js, but that would force you to use a larger bundle size, one of the things Module Federation aims to avoid.

A better option could be to set up a separate webpack.test.config.js, which will just be used for running tests, and in that file set your modules to eager: true:

webpack.test.config.js

shared: share({
  "@angular/core": { 
    eager: true, 
    singleton: true, 
    strictVersion: true, 
    requiredVersion: 'auto' 
  },
  "@angular/common": { 
    eager: true, 
    singleton: true, 
    strictVersion: true, 
    requiredVersion: 'auto' 
  },
  "@angular/common/http": { 
    eager: true, 
    singleton: true, 
    strictVersion: true, 
    requiredVersion: 'auto' 
  }
})

Angular Module Federation -- Shared module is not available for eager consumption

2 Answers2