Angular Module Federation：跨应用共享模型/用例文件的方法问询

问题1：Shell应用的WalletModel接口如何在Host应用中使用 #

要实现Shell中的模型文件供Host使用，核心是通过Module Federation的exposes配置暴露Shell的模型，再在Host中引入该远程模块：

步骤1：在Shell应用中暴露模型文件 #

修改Shell的webpack.config.js，在ModuleFederationPlugin中添加exposes配置，指定要暴露的模型文件路径：

plugins: [
    new ModuleFederationPlugin({
      remotes: {
        // 保留原有配置
      },
      // 新增：暴露WalletModel所在的文件
      exposes: {
        "./wallet-model": "./src/app/wallet.model.ts"
      },
      shared: {
        ...shareAll({
          singleton: true,
          strictVersion: false,
          requiredVersion: "auto",
          eager: true
        }),
      },
    }),
  ],

步骤2：在Host应用中引入远程模型 #

有两种方式可以在Host中使用该接口：

方式一：静态导入（推荐，支持TypeScript类型提示）

1. 修改Host的webpack.config.js，在remotes中声明Shell应用的远程入口：

module.exports = withModuleFederationPlugin({
  name: "mfe1-ng16",
  filename: "remoteEntry.js",
  exposes: {
    "./my-standalone-component": "./src/app/my-standalone-component/my-standalone-component.component.ts",
  },
  // 新增：声明Shell应用的远程依赖
  remotes: {
    shell: "shell@http://localhost:4200/remoteEntry.js" // 替换为Shell实际运行端口
  },
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: false,
      requiredVersion: "auto",
    }),
  },
});

2. 在Host的组件/服务中直接导入接口：

import { WalletModel } from 'shell/wallet-model';

// 正常使用接口
const userWallet: WalletModel = {
  id: '123',
  balance: 1000
};

方式二：动态加载（适合动态场景）

如果不需要静态类型提示，或者需要按需加载模型，可以使用loadRemoteModule动态获取：

import { loadRemoteModule } from '@angular-architects/module-federation';

async useWalletModel() {
  const modelModule = await loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://localhost:4200/remoteEntry.js', // Shell的远程入口
    exposedModule: './wallet-model'
  });

  // 手动声明类型
  type WalletModel = typeof modelModule.WalletModel;
  const wallet: WalletModel = { id: '456', balance: 2000 };
}

问题2：Host应用的wallet.model.ts如何在Shell应用中使用 #

实现逻辑与问题1相反，通过Host暴露模型文件，Shell引入远程模块：

步骤1：在Host应用中暴露模型文件 #

修改Host的webpack.config.js，在exposes中添加模型文件的暴露配置：

module.exports = withModuleFederationPlugin({
  name: "mfe1-ng16",
  filename: "remoteEntry.js",
  exposes: {
    "./my-standalone-component": "./src/app/my-standalone-component/my-standalone-component.component.ts",
    // 新增：暴露Host的模型文件
    "./wallet-model": "./src/app/wallet.model.ts"
  },
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: false,
      requiredVersion: "auto",
    }),
  },
});

步骤2：在Shell应用中引入远程模型 #

同样有两种方式：

方式一：静态导入（支持TypeScript类型）

1. 修改Shell的webpack.config.js，在remotes中声明Host的远程入口：

plugins: [
    new ModuleFederationPlugin({
      // 新增：声明Host应用的远程依赖
      remotes: {
        mfe1: "mfe1-ng16@http://localhost:4201/remoteEntry.js" // Host实际运行端口
      },
      shared: {
        ...shareAll({
          singleton: true,
          strictVersion: false,
          requiredVersion: "auto",
          eager: true
        }),
      },
    }),
  ],

2. 在Shell的组件/服务中导入使用：

import { WalletModel } from 'mfe1/wallet-model';

const wallet: WalletModel = {
  id: '789',
  balance: 3000
};

方式二：动态加载（结合现有组件加载逻辑）

可以在Shell加载Host组件的同时，同步加载模型文件：

private async loadMfe1Async(): Promise<void> {
    if (!this._mfe1ViewContainerRef) {
      return;
    }
    this._mfe1ViewContainerRef.clear();

    // 并行加载组件和模型
    const [componentModule, modelModule] = await Promise.all([
      loadRemoteModule({
        type: 'module',
        exposedModule: './my-standalone-component',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
      }),
      loadRemoteModule({
        type: 'module',
        exposedModule: './wallet-model',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
      })
    ]);

    // 使用模型
    type WalletModel = typeof modelModule.WalletModel;
    const wallet: WalletModel = { id: '000', balance: 5000 };

    // 渲染组件
    this._mfe1ViewContainerRef.createComponent(componentModule.MyStandaloneComponent);
  }

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