Angular 模块联合 -- 共享模块不可用于急切消费

Question

在我的 Angular 微前端上尝试运行测试以在 Module Federation 中使用时出现此问题。 Angular 12, Webpack 5.

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

这些模块如何配置eager consumption？

Answer 1

在大多数情况下，通过在共享的公共 Angular 模块上设置 eager: true 来解决此问题：

        
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 },

Answer 2

创建一个单独的 webpack.conf 用于测试

您可以在主 webpack.config.js 中将所有共享模块设置为 eager: true，但这会迫使您使用更大的包大小，这是 Module Federation 旨在避免的事情之一。

一个更好的选择可能是设置一个单独的 webpack.test.config.js,，它将仅用于运行测试，并在该文件中将您的模块设置为 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 模块联合 -- 共享模块不可用于急切消费

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

javascript

angular

webpack-module-federation