如何通过Angular Module Federation访问共享的settings.json资源？

算力阿峰

2026-8-9

解决方案：共享远程应用的settings.json文件

1. 修正远程应用（productlist）的Webpack配置

Module Federation的shared字段适用于npm包或可复用代码模块，静态JSON文件更适合通过exposes直接暴露为可导入模块。修改远程应用的webpack.config.js：

module.exports = withModuleFederationPlugin({
  name: 'productlist',
  exposes: {
    './Component': './src/app/app.component.ts',
    './dashboard':'./src/app/my-product-list/my-product-list.module.ts',
    './Settings': './src/settings.json' // 新增：将JSON文件暴露为模块
  },
  shared: {
    // 移除原有的`.settings.json`共享配置
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

2. 调整Shell应用（shellapp）的Webpack配置

无需在remotes中单独配置settings.json，它属于productlist远程应用暴露的模块，删除对应配置：

module.exports = withModuleFederationPlugin({
  name: 'shellapp',
  remotes: {
    "productlist": "http://localhost:4204/remoteEntry.js",
    // 移除`"settings.json": "http://localhost:4202/settings.json"`这一行
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

3. 在Shell应用中导入远程配置

在Shell应用需要使用配置的地方，直接从productlist远程应用导入暴露的Settings模块：

// 示例：在Shell的组件或服务中
import settings from 'productlist/Settings';

// 使用配置内容
console.log(settings.apiUrl); // 假设settings.json中有apiUrl字段

4. 优化远程应用自身的配置读取方式

远程应用的AppService可以改用模块导入的方式读取配置，替代XMLHttpRequest，保证和Shell端使用同一模块实例：

import settings from '../settings.json';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  public init() {
    // 直接使用导入的配置对象
    const appConfig = settings;
    // 后续逻辑...
  }
}