Angular 15宿主+18远程模块联邦报错：computed is not a function

环境与配置 #

远程应用（Angular 18） #

webpack.config.js 配置：

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

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

module.exports = {
  output: {
    uniqueName: "remoteDashboard",
    publicPath: "auto",
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },
      name: "remoteDashboard",
      filename: "remoteEntry.js",
      exposes: {
        "./HomeModule": "./src/app/components/home/home.module.ts",
        "./SettingsComponent": "./src/app/components/dashboard/settings/settings.component.ts",
      },
      shared: {
        ...sharedMappings.getDescriptors(),
        "@angular/core": { singleton: true, strictVersion: false, requiredVersion: "^18.2.0" },
        "@angular/common": { singleton: true, strictVersion: false, requiredVersion: "^18.2.0" },
        "@angular/router": { singleton: true, strictVersion: false, requiredVersion: "^18.2.0" },
        "@angular/material": { singleton: true, strictVersion: false, requiredVersion: "^18.0.0" },
        "chart.js": { singleton: true, strictVersion: false, requiredVersion: "^4.4.0" },
        "ng2-charts": { singleton: true, strictVersion: false, requiredVersion: "^6.0.0" },
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

宿主应用（Angular 15） #

webpack.config.js 配置：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    uniqueName: "EjarhostApp",
    publicPath: "auto",
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  resolve: {
    fallback: {
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "EjarhostApp",
      library: { type: "module" },
      shared: {
        "@angular/core": {
          singleton: true,
          strictVersion: false,
          requiredVersion: "^15.2.9",
        },
        "@angular/common": {
          singleton: true,
          strictVersion: false,
          requiredVersion: "^15.2.9",
        },
        "@angular/router": {
          singleton: true,
          strictVersion: false,
          requiredVersion: "^15.2.9",
        },
        "@angular/platform-browser": {
          singleton: true,
          strictVersion: false,
          requiredVersion: "^15.2.9",
        },
        "@angular/material": {
          singleton: true,
          strictVersion: false,
          requiredVersion: "^15.2.9",
        },
      },
    }),
  ],
};

问题现象 #

访问远程模块时，浏览器控制台抛出错误：

core.mjs:8400 ERROR Error: Uncaught (in promise): TypeError: (0 , angular_core__WEBPACK_IMPORTED_MODULE_0.computed) is not a function TypeError: (0 , angular_core__WEBPACK_IMPORTED_MODULE_0.computed) is not a function

原因分析 #

Angular 18在@angular/core中新增了computed等响应式特性，但Angular 15的核心库中没有这些API。当宿主应用（Angular 15）加载远程模块（Angular 18）时，远程代码会尝试调用宿主提供的@angular/core中的computed方法，导致找不到该方法而抛出错误。

问题解答 #

1. Module Federation架构中能否混用不同版本的Angular？ #

可以，但存在严格限制：

• 仅当远程应用未使用宿主版本中不存在的API/特性时才能正常工作。
• 若远程应用依赖了宿主版本没有的新特性（如本例中的computed），必然会出现兼容性错误。
• 跨大版本（如15→18）混用风险极高，因为Angular大版本间会有大量API变更和特性新增。

2. 如何解决当前兼容性问题？ #

有两种可行方案：

方案一：禁用Angular核心库的单例共享

修改宿主和远程应用的Module Federation配置，将@angular/core、@angular/common等核心库的singleton设为false，让宿主和远程各自加载自己版本的Angular核心库：

• 远程应用配置中，将核心库的singleton改为false：

  "@angular/core": { singleton: false, strictVersion: false, requiredVersion: "^18.2.0" },
  "@angular/common": { singleton: false, strictVersion: false, requiredVersion: "^18.2.0" },
  // 其他核心库同理
  

• 宿主应用配置中，同样将核心库的singleton改为false：

  "@angular/core": { singleton: false, strictVersion: false, requiredVersion: "^15.2.9" },
  "@angular/common": { singleton: false, strictVersion: false, requiredVersion: "^15.2.9" },
  // 其他核心库同理
  

  注意：此方案会导致页面加载两个版本的Angular核心库，增加包体积和内存占用，且需要确保远程模块的DOM渲染、路由等逻辑与宿主隔离，避免冲突。

方案二：修改远程应用代码，移除对Angular 18新增特性的依赖

如果远程应用的computed等特性不是必须的，可将代码降级为Angular 15兼容的写法（比如用BehaviorSubject结合map替代computed），同时将远程应用的Angular版本降级到15，确保API一致。

3. 是否需要统一Angular版本？推荐的升级/对齐方案是什么？ #

强烈建议统一Angular版本，这是避免跨版本兼容性问题的最可靠方案，原因如下：

• Angular大版本间的API和内部机制差异较大，跨版本共享核心库几乎无法避免冲突。
• 统一版本后可以正常使用Module Federation的单例共享特性，减少包体积，提升性能。

推荐的对齐方案：

方案一：升级宿主应用到Angular 18

这是最优选择，因为Angular 18是较新的稳定版本，拥有更多特性和性能优化。升级步骤：

1. 使用Angular CLI的升级工具：ng update @angular/cli@18 @angular/core@18
2. 处理升级过程中的代码兼容性问题（如过时API替换、依赖库升级，比如@angular/material需要升级到18版本）
3. 同步Module Federation配置中的requiredVersion为Angular 18的版本号
4. 测试宿主和远程应用的集成逻辑，确保无冲突

方案二：降级远程应用到Angular 15

如果暂时无法升级宿主，可将远程应用降级到Angular 15：

1. 使用Angular CLI降级：ng update @angular/cli@15 @angular/core@15
2. 移除远程代码中依赖Angular 18的特性（如computed），替换为Angular 15兼容的实现
3. 同步远程应用Module Federation配置中的requiredVersion为Angular 15的版本号
4. 测试集成功能，确保正常运行

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