使用 Angular 模块联合，我如何配置我的 shell 和子应用程序以使用同一库的不同版本？

Question

我正在使用 Angular 14 和模块联合。在我的 shell 应用程序中，我正在使用这个库

"my-common-lib": "^0.0.10",

我在我的路线中使用它加载一个子应用程序

  {
    path: 'products',
    loadChildren: () =>
        loadRemoteModule({
            type: 'module',
            remoteEntry: 'http://localhost:8085/remoteEntry.js',
            exposedModule: './start'
        })
        .then(m => m.MyProductsModule)
  },

但是我收到这个错误

ERROR Error: Uncaught (in promise): Error: Unsatisfied version 0.0.10 from parentApp of shared singleton module my-common-lib (required =0.0.15)

可能是因为在我的子应用程序中，我有这个版本的共享库

"my-common-lib": "^0.0.15",

这是我的子应用程序中的 webpack.config.js 文件

module.exports = withModuleFederationPlugin({

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

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

有没有办法让每个人都使用自己版本的库？我基本上想将孩子的功能与父母隔离开来，但不知道该怎么做，或者这是否可能。

Answer 1

试试这个

module.exports = withModuleFederationPlugin({

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

  shared: {
    'my-common-lib-custom': {
      singleton: true,
      strictVersion: true,
      requiredVersion: '^0.0.15'
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

import { myCommonLibCustom as myCommonLib } from 'my-common-lib-custom';

如果不起作用，请尝试使用 shareScope 选项。此选项为共享模块创建一个新的命名空间

Answer 2

是的，可以让每个应用程序在 Angular 中使用自己的库版本和模块联合。实现这一点的一种方法是在每个应用程序的 webpack 配置中为库指定不同的别名。

例如，在 shell 应用程序的 webpack 配置中，您可以将库别名为版本 0.0.10：

module.exports = {
  // ...
  resolve: {
    alias: {
      'my-common-lib': '[email protected]',
    },
  },
  // ...
};

在子应用程序的 webpack 配置中，您可以将库别名为版本 0.0.15：

module.exports = {
  // ...
  resolve: {
    alias: {
      'my-common-lib': '[email protected]',
    },
  },
  // ...
};

通过这样做，shell 和子应用程序将使用它们各自版本的库。请注意，您需要指定完整的包名称，包括别名中的版本号。另外，请确保从两个应用程序的 webpack 配置中删除共享库配置，因为您不再共享该库了。