Angular中ng serve -o失效但ng serve正常的问题排查

核心问题定位 #

• 差异点：ng serve -o启动时，Webpack生成的代码中多了一行import { createRequire as __WEBPACK_EXTERNAL_createRequire } from "module";，而ng serve启动时没有。"module"是Node.js核心模块，浏览器环境无法识别，因此抛出裸模块未映射的错误。
• 触发原因：-o（即--open）参数可能触发Angular CLI/Webpack启用了浏览器环境不需要的Node.js相关编译逻辑，自动注入了createRequire相关代码。

修复方案 #

1. 禁用Webpack的Node.js模块注入 #

在远程应用的webpack.config.js（若使用@angular-architects/module-federation，对应关联的Webpack配置文件）中添加Node模块禁用配置，告诉Webpack不要处理Node核心模块：

module.exports = {
  // 保留原有配置
  node: {
    module: 'empty',
    fs: 'empty',
    // 若其他Node核心模块出现类似问题，也可设为'empty'
  }
};

2. 绕过-o参数的异常触发 #

如果不想修改Webpack配置，可直接用ng serve启动后手动打开浏览器访问http://localhost:4201，或者执行ng serve --open=false替代ng serve -o。

3. 回滚依赖版本（修复npm update导致的恶化问题） #

• 恢复之前备份的package.json和package-lock.json（若没有备份，可从版本控制系统回退）
• 删除本地node_modules文件夹
• 执行npm install重新安装依赖

4. 检查Module Federation配置正确性 #

• 确认远程应用的module-federation.config.js中，exposes、shared配置未引用Node.js专属模块
• 确保shared中的依赖均为浏览器兼容版本

验证步骤 #

1. 执行ng serve确认远程应用正常运行
2. 应用修复后执行ng serve -o，检查浏览器控制台是否仍有报错
3. 验证宿主应用能否正常加载远程模块

内容的提问来源于stack exchange，提问作者Abdalkader Otri