Angular 15项目CI构建报错：无法解析@apollo/client/core模块

这个报错的核心原因是ES模块严格模式下要求导入必须带文件扩展名，apollo-angular的部分导入语句未添加扩展名，本地环境的构建工具可能有宽松的解析策略，但CI环境严格遵循ES模块规范，因此触发了模块解析失败。

以下是可行的解决方案：

• 更新兼容版本的依赖库
  旧版本的apollo-angular和@apollo/client存在ES模块导入的兼容性问题，升级到适配Angular 15的版本即可解决。执行以下命令更新：

  npm install apollo-angular@latest @apollo/client@latest graphql@latest
  

  也可以在package.json中直接锁定兼容版本（示例版本适配Angular 15）：

  "apollo-angular": "^4.2.0",
  "@apollo/client": "^3.8.0",
  "graphql": "^16.8.0"
  

• 配置webpack自动补全扩展名
  如果项目自定义了webpack配置，可添加扩展名解析规则，让webpack自动识别缺失的扩展名：

  1. 在项目根目录创建webpack.config.js，内容如下：

     module.exports = {
       resolve: {
         extensions: ['.ts', '.js', '.mjs']
       }
     };
     

  2. 在angular.json的build配置中引入该文件：

     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           "customWebpackConfig": {
             "path": "./webpack.config.js"
           },
           // 其他原有配置...
         }
       }
     }
     

• 清理CI环境的依赖缓存
  CI环境可能缓存了旧的依赖包，导致版本不一致。在CI执行脚本中添加清理步骤：

  rm -rf node_modules package-lock.json
  npm install
  

  若使用npm ci，确保本地更新后的package-lock.json已推送到仓库，CI会严格按照lock文件安装依赖。

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