Angular17宿主通过Module Federation加载Angular14远程模块时process未定义

问题重现 #

加载远程模块时触发以下错误：

ReferenceError: process is not defined
    at 94655 (util.js:109:1)
    at __webpack_require__ (bootstrap:19:1)
    at 50372 (checks.js:6:12)
    at __webpack_require__ (bootstrap:19:1)
    at 14430 (index.js:6:1)
    at __webpack_require__ (bootstrap:19:1)
    at 89236 (backoff.js:5:15)
    at __webpack_require__ (bootstrap:19:1)
    at 42215 (index.js:4:15)
    at __webpack_require__ (bootstrap:19:1)

环境信息 #

• 宿主Angular版本：17
• 远程Angular版本：14
• Module Federation包：@angular-architects/module-federation

原因分析 #

Angular 17默认使用Webpack 5，而Webpack 5移除了对Node.js全局变量（如process）的自动注入。Angular 14的依赖或打包产物中仍存在对process的引用，且之前的polyfill配置未覆盖到模块联邦的加载上下文，导致报错。

解决方案 #

1. 在宿主和远程应用的Webpack配置中添加DefinePlugin #

Webpack 5需要手动通过DefinePlugin注入process变量，替换代码中的引用：

宿主应用webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container;
const webpack = require('webpack');

module.exports = {
  output: {
    publicPath: "auto", 
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
      'process': JSON.stringify({ env: process.env })
    }),
    new ModuleFederationPlugin({
      name: 'hostApp',
      shared: {
        "@angular/core": { singleton: true, eager: true, requiredVersion: false },
        "@angular/common": { singleton: true, eager: true, requiredVersion: false },
        "@angular/router": { singleton: true, eager: true, requiredVersion: false },
      },
    }),
  ],
};

远程应用webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container;
const webpack = require('webpack');

module.exports = {
  output: {
    publicPath: "auto", 
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
      'process': JSON.stringify({ env: process.env })
    }),
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './AppModule': './src/app/app.module.ts',
      },
      shared: {
        "@angular/core": { singleton: true, eager: true, requiredVersion: false },
        "@angular/common": { singleton: true, eager: true, requiredVersion: false },
        "@angular/router": { singleton: true, eager: true, requiredVersion: false },
      },
    }),
  ],
};

2. 调整Polyfill的加载时机 #

将process/browser的导入放在宿主应用main.ts的最顶部，确保在任何模块加载前生效：

// main.ts 最顶部
import 'process/browser';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

同时确保已安装process包：

npm install process --save

3. 调整共享依赖的版本配置 #

由于Angular 17和14版本差异较大，将共享依赖的requiredVersion设为false，避免版本冲突导致的额外问题（注意：跨大版本共享Angular核心库可能存在兼容性风险，需自行测试验证）。

验证步骤 #

1. 重启宿主和远程应用的开发服务器
2. 访问http://localhost:4200/mfe1，确认远程模块正常加载，无process is not defined错误

内容的提问来源于stack exchange，提问作者Vishnu Kuppan