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

Question

我正在尝试使用 ng update 从 Angular v11 升级一个 Angular 项目，但出现了对等依赖错误。我参考来了解对等依赖性错误，但在这种情况下仍然无济于事。

。这是 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/build-angular@0.1100.7
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/compiler-cli@12.2.16
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.2.16
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 添加到您的升级命令或改用 yarn 来修复它。

参考。 GitHubIssue

（我也有确切的问题，这对我来说很好）

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

@angular-devkit/build-angular dependency issue while upgrading from Angular 11.0.5 to 12.2.16

npm

angular-cli