Nx单仓安装@angular/localize后npm操作出现依赖冲突问题

问题描述 #

在Nx单仓库中搭建了NestJS后端与Angular前端项目，想要使用@angular/localize功能：

1. 执行npm install @angular/localize时出现ERESOLVE依赖树解析错误，原因是@angular/localize@17.2.3依赖@angular/compiler@17.2.3，但项目中仅安装了@angular/compiler@17.1.3。
2. 为避免使用--force或--legacy-peer-deps，尝试安装@angular/localize@17.1.0，操作无报错。
3. 后续执行npm update和npm install时仍出现类似依赖冲突错误，错误提示@angular/localize@17.2.3依赖@angular/compiler@17.2.3，而项目中@angular/localize的版本标识为^17.1.3。

用户疑问：

• 为何会出现该错误？
• 是否可修复？
• 这是否为预期行为？
• 存在@angular/localize的依赖问题时无法更新其他包吗？
• 为何初次安装无依赖问题，但重新安装时却报错？

附上完整package.json文件：

{
  "name": "@wordle-ase/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "~17.1.0",
    "@angular/cdk": "^17.2.1",
    "@angular/common": "~17.1.0",
    "@angular/compiler": "~17.1.0",
    "@angular/core": "~17.1.0",
    "@angular/forms": "~17.1.0",
    "@angular/localize": "^17.1.3",
    "@angular/material": "~17.2.1",
    "@angular/platform-browser": "~17.1.0",
    "@angular/platform-browser-dynamic": "~17.1.0",
    "@angular/router": "~17.1.0",
    "@nestjs/common": "^10.0.2",
    "@nestjs/core": "^10.0.2",
    "@nestjs/jwt": "^10.2.0",
    "@nestjs/mapped-types": "*",
    "@nestjs/mongoose": "^10.0.4",
    "@nestjs/platform-express": "^10.0.2",
    "@nestjs/swagger": "^7.3.0",
    "@nrwl/angular": "^18.0.5",
    "axios": "^1.6.0",
    "mongoose": "^8.2.1",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.2",
    "@angular-devkit/core": "~17.1.0",
    "@angular-devkit/schematics": "~17.1.0",
    "@angular-eslint/eslint-plugin": "~17.0.0",
    "@angular-eslint/eslint-plugin-template": "~17.0.0",
    "@angular-eslint/template-parser": "~17.0.0",
    "@angular/cli": "~17.1.0",
    "@angular/compiler-cli": "~17.1.0",
    "@angular/language-service": "~17.1.0",
    "@angular/material": "^17.2.1",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.0.2",
    "@nx/eslint": "18.0.3",
    "@nx/eslint-plugin": "18.0.3",
    "@nx/jest": "18.0.5",
    "@nx/js": "18.0.5",
    "@nx/nest": "^18.0.3",
    "@nx/node": "18.0.3",
    "@nx/web": "18.0.3",
    "@nx/webpack": "18.0.3",
    "@nx/workspace": "18.0.3",
    "@schematics/angular": "~17.1.0",
    "@swc-node/register": "~1.8.0",
    "@swc/core": "~1.3.85",
    "@swc/helpers": "~0.5.2",
    "@types/jest": "^29.4.0",
    "@types/node": "~18.16.9",
    "@typescript-eslint/eslint-plugin": "^6.13.2",
    "@typescript-eslint/parser": "^6.13.2",
    "eslint": "~8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.4",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "18.0.3",
    "prettier": "^2.6.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.3.2",
    "webpack-cli": "^5.1.4"
  }
}

问题解答 #

1. 错误出现的原因 #

• 项目中@angular/localize使用^17.1.3版本范围，该符号允许安装17.1.3及以上、18.0.0以下的最新版本。执行npm update或重新npm install时，npm会拉取该范围内的最新版17.2.3。
• Angular官方包要求同大版本下的子包版本完全一致，@angular/localize@17.2.3必须搭配@angular/compiler@17.2.3，但项目中compiler是~17.1.0锁定的小版本，两者不匹配触发了npm的严格依赖校验。

2. 修复方案 #

有两种可靠的修复方式：

• 方案一：同步Angular核心包版本
  将@angular/compiler及其他Angular核心包（animations、common、core等）的版本统一升级到~17.2.3，同时保持@angular/localize版本一致，让依赖完全匹配。
• 方案二：锁定@angular/localize的小版本
  修改package.json中@angular/localize的版本标识，把^17.1.3改成~17.1.3或直接写死17.1.3，避免npm自动升级到17.2.x版本，和现有17.1.x的compiler兼容。

3. 是否属于预期行为 #

这是npm和Angular的预期行为。npm 7+默认启用严格peer依赖校验，目的是避免潜在运行时问题；而Angular官方包本身就要求同大版本子包版本统一，所以这种冲突符合两者的设计逻辑。

4. 存在依赖问题时能否更新其他包 #

可以更新不涉及冲突链的包。指定具体包名执行更新，比如npm update axios，npm只会处理该包的依赖，不会触发@angular/localize的版本升级，也就不会出现冲突。但执行不带参数的npm update时，npm会尝试更新所有包，就会触发@angular/localize的版本升级，进而引发冲突。

5. 初次安装无问题、后续报错的原因 #

初次安装@angular/localize@17.1.0时，该版本依赖17.1.x的compiler，和项目现有版本匹配，所以无报错。
后续执行npm update或重新npm install时，npm读取package.json中的^17.1.3版本范围，尝试拉取最新版17.2.3，此时版本不匹配引发错误。另外，如果package-lock.json被删除或更新，npm会重新解析依赖树，也会触发该问题。

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