非Nx环境下Angular Module Federation共享服务单例失效问题

我是Angular Module Federation新手，未使用Nx，创建了两个独立Angular 15项目：Host（项目1）和Remote（项目2），还有一个包含服务类的独立Angular库ezy-data-lib，尝试通过该服务实现联邦应用间通信。

已将ezy-data-lib安装并导入至两个项目的AppModule中，期望通过shareAll配置实现服务单例共享：在Host中更新服务值后，Remote能读取到更新后的值，但实际未实现单例共享。

尝试过的操作 #

• 在Host和Remote的tsconfig.json中配置路径映射：

"paths": {
  "ezyDataLib": [
    "./node_modules/ezy-data-lib/public-api.d.ts"
  ]
}

更新webpack的sharedMappings注册：

sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  ['ezyDataLib']);

修改导入路径后出现assertion failed错误，恢复导入路径后错误消失，但单例问题仍存在；

• 将shareAll替换为手动配置共享依赖：

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

  ...sharedMappings.getDescriptors()
})

仍无法实现单例；

• 尝试在shareAll中开启eager加载，问题依旧。

当前场景 #

点击Host中的按钮更新库服务值，通过loadRemoteModule加载Remote后，无法在Remote中获取到更新后的值。

Host的webpack配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const shareAll = mf.shareAll;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "host",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },

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


    }),
    sharedMappings.getPlugin()
  ],
};

Remote的webpack配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const shareAll = mf.shareAll;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  []);

module.exports = {
  output: {
    uniqueName: "eRemote",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },

      // For remotes (please adjust)
      name: "eRemote",
      filename: "remoteEntry.js",
      exposes: {
        './AppModule': './src/app/app.module.ts',
      },


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

    }),
    sharedMappings.getPlugin()
  ],
};

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