Angular微前端多仓库中使用Webpack External模块生产构建时触发版本错误

这个错误本质是esbuild（Angular生产构建默认使用的打包工具）无法识别非标准的版本号格式，"15.2-15.3"这种连字符范围不符合语义化版本规范，导致转换失败。结合你的场景（本地运行正常、生产构建失败，且使用了ngx-build-plus和微前端模块导入），可以按以下步骤排查解决：

1. 定位问题依赖包 #

首先找出项目中哪个依赖包使用了这种非标准版本号：

• 全局搜索项目中所有package.json文件（包括node_modules里的），查找包含"15.2-15.3"的字段，大概率是某个包的engines.node或者自身版本号字段。
• 重点检查你通过webpack导入的微前端模块的依赖，或者ngx-build-plus相关的依赖版本匹配情况。

2. 修正版本号格式 #

找到问题包后，做如下处理：

• 如果是你自己项目的package.json里的配置，把"15.2-15.3"改成标准语义化版本格式，比如：
  • ^15.2.0：兼容15.2.x的所有更新
  • ~15.2.0：仅兼容15.2.x的补丁更新
  • >=15.2.0 <15.4.0：明确版本范围
• 如果是第三方依赖包的问题，可以使用patch-package工具修改该包的版本字段，将非标准格式替换为标准格式，然后添加补丁到项目中。

3. 确保ngx-build-plus与Angular版本兼容 #

你的项目使用了ngx-build-plus，需要确保它的版本和Angular 15完全匹配：

• 执行命令安装适配Angular 15的版本：

  npm install @ngx-build-plus/ngx-build-plus@15 --save-dev
  

• 检查package.json中@angular/core、@angular-devkit/build-angular和ngx-build-plus的版本是否一致（都是15.x.x系列），版本不匹配也可能触发这类奇怪的构建错误。

4. 调整webpack构建配置（可选） #

如果以上方法无效，可以尝试修改webpack配置，调整esbuild的处理逻辑：

• 在webpack.config.js中添加esbuild的配置，禁用版本检测相关的逻辑，或者指定兼容的版本范围：

  module.exports = {
    // ...其他配置
    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: 'esbuild-loader',
          options: {
            target: 'es2020',
            // 可以尝试添加相关配置绕过版本检测
          }
        }
      ]
    }
  };
  

本地运行正常是因为开发环境可能没有启用esbuild的严格版本校验，而生产构建会启用更严格的优化和校验逻辑，所以才会出现差异。

内容的提问来源于stack exchange，提问作者Ashif Sayyad