执行npm ci后Angular 16项目ng s启动失败求助

问题核心 #

执行npm ci后运行ng s出现ES模块命名导出错误，根源是依赖链中find-up@6.3.0以ES模块方式命名导入locate-path@7.2.0，但locate-path@7.2.0是CommonJS模块，不支持这种导入方式；而npm i会自动调整依赖版本，规避了这个兼容性问题。

解决方法 #

方法1：使用npm overrides锁定兼容版本 #

在项目的package.json中添加overrides字段，强制指定兼容的locate-path版本（6.x版本支持ES模块命名导出）：

{
  // ... 其他原有配置
  "overrides": {
    "locate-path": "6.0.0"
  }
}

添加后执行以下命令：

npm ci
ng s

如果上述方式无效，可以更精准地锁定依赖链中的版本：

{
  // ... 其他原有配置
  "overrides": {
    "@angular-devkit/build-angular": {
      "babel-loader": {
        "find-cache-dir": {
          "pkg-dir": {
            "find-up": {
              "locate-path": "6.0.0"
            }
          }
        }
      }
    }
  }
}

方法2：重新生成package-lock.json #

npm ci严格遵循package-lock.json中的依赖版本，可能旧的lock文件存在兼容性问题。执行以下步骤重新生成：

# 删除现有依赖和lock文件
rm -rf node_modules package-lock.json
# 用npm i生成兼容的lock文件
npm i
# 再用npm ci安装
npm ci
ng s

方法3：检查Node.js版本 #

Angular 16要求Node.js版本为16.14.0+ 或 18.x，过低的Node.js版本可能导致ES模块与CommonJS的兼容性处理异常。升级Node.js到推荐版本后，重新执行npm ci和ng s。

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