发现不兼容的对等依赖项 - 将 Angular 从 8 升级到 9

Question

我是按照官方文档升级的。

此步骤已完成，没有任何错误。

ng update @angular/core@8 @angular/cli@8

下一步失败。

ng update @angular/core @angular/cli
The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 45 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular/core" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/animations" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/compiler" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/forms" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/common" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-browser" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/compiler-cli" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/router" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-browser-dynamic" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@ngtools/webpack" has an incompatible peer dependency to "typescript" (requires ">=3.4 < 3.6", would install "3.7.5").
Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

我检查了 node_modules 并安装了正确版本的 tslib。 我手动添加了 tslib 条目并运行 npm install 以查看错误是否消失。

  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.6.4",
    "npm": "^6.13.7",
    "rxjs": "^6.5.4",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.803.25",
    "@angular-devkit/build-angular": "^0.803.25",
    "@angular-devkit/build-optimizer": "^0.803.25",
    "@angular-devkit/build-webpack": "^0.803.25",
    "@angular-devkit/core": "^8.3.25",
    "@angular-devkit/schematics": "^8.3.25",
    "@angular/cli": "^8.3.25",
    "@angular/compiler-cli": "^8.2.14",
    "@ngtools/webpack": "^8.3.25",
    "@schematics/angular": "^8.3.25",
    "@schematics/update": "^0.803.25",
    "@types/jasmine": "^3.5.4",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.12.27",
    "tslib": "^1.10.0",
    "codelyzer": "^5.2.1",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "rxjs-tslint": "^0.1.7",
    "ts-node": "^8.6.2",
    "tslint": "^5.20.1",
    "typescript": "~3.4",
    "webpack": "^4.41.6",
    "webpack-dev-server": "^3.10.3"
  }

吴诉 output

Angular CLI: 8.3.25
Node: 12.13.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.24
@angular-devkit/build-angular     0.803.25
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.25
@angular-devkit/core              8.3.24
@angular-devkit/schematics        8.3.24
@angular/cli                      8.3.25
@ngtools/webpack                  8.3.24
@schematics/angular               8.3.24
@schematics/update                0.803.24
rxjs                              6.5.4
typescript                        3.4.5
webpack                           4.41.5

我没有尝试使用 --force 选项。 还有别的办法吗？

Answer 1

看起来您浏览了其中一个错误：

Package "@ngtools/webpack" has an incompatible peer dependency to "typescript" (requires ">=3.4 < 3.6", would install "3.7.5").

尝试使用较低版本的 @ngtools/webpack，它适用于 TypeScript 3.4 到 3.5。

或者，将 package.json 中的 TypeScript 版本更新为 3.7.5 并运行npm update ，然后您应该能够更新@angular/core & @angular/cli。

Answer 2

ng update @angular/core @angular/cli --force可能需要使用--force标志，请参阅Angular 核心成员的原始答案。

Answer 3

就我而言，解决方法是在运行 ng update [package] 时使用--force标志来覆盖依赖性问题。

这无论如何都会升级包，您可以使用更新的依赖项验证您的应用程序。 如果由于重大更改仍需要更新该第三方依赖项，则需要更新该包。

Answer 4

在我的情况下，接受的答案不起作用。 所以我执行了以下命令，它对我有用。

npm install @angular/cli@latest @angular-devkit/build-angular@latest  --save-dev

但是我在我的本地项目之一而不是系统上的全局角度版本上做了这个。

Answer 5

就我而言，我当然不想使用--force进行更新，将潜在的问题留给以后。

使用npm update无助于导致有问题的库（对我来说，它是@ng-bootstrap ）版本是与旧版本 Angular（在我的例子中，Angular 版本 12）的特定绑定。

---

所以，我卸载了冲突的库，然后进行了 Angular 升级并再次安装了库。 当然，由于我使用的是旧版本引导程序的逻辑，因此我不得不手动替换这些用法。