从 Angular 11.0.5 升级到 12.2.16 时出现 @angular-devkit/build-angle 依赖问题

Question

我尝试使用 ng update 从 Angular v11 升级 Angular 项目，但出现了对等依赖错误。我提到如何阅读npm“冲突的对等依赖”错误消息？ 了解对等依赖错误，但在这种情况下仍然没有帮助。

。这是 ng update 的输出：

We analyzed your package.json, there are some packages to update:

  Name                               Version                  Command to update
 --------------------------------------------------------------------------------
  @angular/cli                       11.2.18 -> 12.2.9        ng update @angular/cli@12
  @angular/core                      11.2.14 -> 12.2.9        ng update @angular/core@12
There might be additional packages which don't provide 'ng update' capabilities that are outdated.
You can update the additional packages by running the update command of your package manager.

运行 ng update @angular/cli@12 时，我收到以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^12.2.16" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^12.2.16" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^12.2.16" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

这是我的 package.json 运行ng update之前

{
  "name": "my-first-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.5",
    "@angular/common": "^11.0.5",
    "@angular/compiler": "^11.0.5",
    "@angular/core": "^11.0.5",
    "@angular/forms": "^11.0.5",
    "@angular/platform-browser": "^11.0.5",
    "@angular/platform-browser-dynamic": "^11.0.5",
    "@angular/router": "^11.0.5",
    "bootstrap": "3.3.7",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.0.0",
    "tslib": "^2.0.3",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.4",
    "@angular/cli": "^11.0.4",
    "@angular/compiler-cli": "^11.0.5",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.9",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

运行ng update之后

    {
  "name": "my-first-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.16",
    "@angular/common": "^12.2.16",
    "@angular/compiler": "^12.2.16",
    "@angular/core": "^12.2.16",
    "@angular/forms": "^12.2.16",
    "@angular/platform-browser": "^12.2.16",
    "@angular/platform-browser-dynamic": "^12.2.16",
    "@angular/router": "^12.2.16",
    "bootstrap": "3.3.7",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.0.0",
    "tslib": "^2.0.3",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.16",
    "@angular/cli": "^12.2.16",
    "@angular/compiler-cli": "^12.2.16",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.9",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.16",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  }
}

我检查了代码https://github.com/angular/angular-cli/blob/12.2.x/packages/angular_devkit/build_angular/package.json

  "peerDependencies": {
    "@angular/compiler-cli": "^12.0.0",

据，直到...为止我知道，^12.0.0 不应该导致 12.2.16 出现问题，因为它处于相同的主要版本中，那么为什么我仍然收到对等依赖错误？

Answer 1

发生这种情况是因为 npm 中的 Semver 错误。您应该能够通过在升级命令中添加 --force 或使用纱线来修复它。

参考号GitHub 问题

（我也遇到了确切的问题，这工作正常为我）

Answer 2

您最好通过检查兼容性来正确更新与您的版本相对应的软件包
这里：https://www.npmjs.com/
在这里： https://www.npmpeer.dev/packages/ @angular-devkit/build-angular/compatibility

您还应该尝试在终端中使用此命令：npm list package 'packageName' 来获取依赖关系树。

这一切都需要耐心，而不是蛮力。
您应该正确解决这些冲突，而不是使用 --force ，否则您将遇到问题的无限循环。我去过那里相信我。

祝接下来的人好运！