Angular Module Federation——共享模块不可用于热切使用答案

【问题标题】：Angular Module Federation -- Shared module is not available for eager consumptionAngular Module Federation——共享模块不可用于热切使用
【发布时间】：2021-10-26 17:06:41
【问题描述】：

尝试在我的 Angular 微前端上运行测试以在模块联合中使用时遇到此问题。 Angular 12，Webpack 5。

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

如何为这些模块配置渴望消费？

【问题讨论】：

标签： javascript angular webpack-module-federation

【解决方案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 },

【讨论】：

【解决方案2】：

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

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

更好的选择可能是设置一个单独的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' 
  }
})

【讨论】：