Angular模块联邦：如何让壳应用与子应用使用同一库的不同版本？

问题根源 #

你遇到的错误是因为子应用的shareAll配置开启了singleton: true和strictVersion: true，强制要求共享模块my-common-lib必须是单例且版本完全匹配。壳应用的0.0.10版本和子应用的0.0.15版本不兼容，因此触发版本校验错误。

解决方案：让子应用独立使用自身版本的库 #

要实现壳应用与子应用各自使用独立版本的my-common-lib，只需修改子应用的模块联邦配置，调整该库的共享规则：

方法一：直接排除该库的共享（推荐，完全隔离） #

修改子应用的webpack.config.js，在shared配置中明确将my-common-lib设置为不共享：

module.exports = withModuleFederationPlugin({
  name: 'customer',
  
  exposes: {
    './start':'./src/app/myProducts/myProducts.module.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    // 排除my-common-lib的共享，子应用将打包自身版本
    'my-common-lib': false
  },
});

方法二：调整共享规则允许多版本共存 #

如果仍希望保留共享逻辑但允许不同版本，可修改该库的共享配置：

module.exports = withModuleFederationPlugin({
  name: 'customer',
  
  exposes: {
    './start':'./src/app/myProducts/myProducts.module.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    'my-common-lib': {
      singleton: false, // 允许同一库存在多个实例
      strictVersion: false, // 关闭严格版本校验
      requiredVersion: '^0.0.15' // 指定子应用需要的版本
    }
  },
});

原理说明 #

• 方法一中，设置'my-common-lib': false后，webpack不会将该库标记为共享模块，子应用会把自身的0.0.15版本完整打包进资源包，与壳应用的0.0.10版本完全独立运行，彻底避免版本冲突。
• 方法二中，关闭singleton和strictVersion后，模块联邦允许同一库的多个版本共存，壳应用和子应用各自加载所需版本，也能实现隔离效果。

可行性说明 #

这种版本隔离的需求完全可以实现，通过调整模块联邦的shared配置即可达成，既能满足子应用功能与父应用隔离的目标，也不会影响双方的正常运行。唯一需要注意的是，子应用的包体积会因包含独立的库版本略有增加，但这是实现隔离的合理代价。

内容的提问来源于stack exchange，提问作者Dave