从 Angular 11 升级到 12 会导致对等依赖冲突

Posted 2023-03-07

【中文标题】从 Angular 11 升级到 12 会导致对等依赖冲突

【英文标题】：Upgrade from Angular 11 to 12 causes peer dependency conflict

【发布时间】：2021-09-03 14:39:14

【问题描述】：

我目前正在从 Angular 11.2.14 升级到 Angular 12.0.5，我遇到了以下问题：

npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"12.0.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@12.0.5
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"12.0.5" from the root project
npm ERR!   peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.0.5
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"12.0.5" from the root project
npm ERR!   2 more (@angular/localize, ng-packagr)
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.

我是否正确假设这是因为版本 12.0.5 和 12.0.0 之间存在冲突并且它们不兼容？我所有的依赖项现在都具有相同的版本，为什么会出现冲突？

package.json

    "@angular-builders/custom-webpack": "12.1.0",
    "@angular-devkit/build-angular": "12.0.5",
    "@angular/animations": "12.0.5",
    "@angular/cdk": "12.0.5",
    "@angular/cli": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/compiler-cli": "12.0.5",
    "@angular/core": "12.0.5",
    "@angular/flex-layout": "11.0.0-beta.33",
    "@angular/forms": "12.0.5",
    "@angular/language-service": "12.0.5",
    "@angular/material": "11.2.13",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",

非常感谢！

【问题讨论】：

请检查您的全局 Angular cli 版本

我得到了同样的结果，并且查看消息并不清楚问题是什么，因为我希望它可以正常工作，我们不必为此烦恼。我尝试从angular.io/cli/update 执行“ng update @angular/cli @angular/core”，但我收到另一个错误“n unhandled exception occurred: Cannot locate bin for temporary package:@angular/cli.”

【参考方案1】：

我必须使用 npm v6 才能成功更新：

npm -g i npm@^6
npm i
ng update @angular/cli@^12 @angular/core@^12

【讨论】：

谢谢！经过几次尝试解决一堆错误后，将 npm 从 v8 降级到 v6 神奇地为我修复了它

【参考方案2】：

当我使用官方更新指南https://update.angular.io/ 和命令 npx @angular/cli@12 update @angular/core@12 @angular/cli@12 时，我在每个版本的角度更新上都遇到了同样的错误。 经过长时间的谷歌搜索和尝试，我找到了下一个角度和角度材料更新的方法（例如 10 到 11 更新）：

npx @angular/cli@11 update @angular/core@11 @angular/cli@11

得到主题错误

删除 node_modules 和 package-lock.json

npm install

Git 提交

ng update @angular/core@11 --migrate-only --from 10 --to 11

Git 提交

ng update @angular/cli@11 --migrate-only --from 10 --to 11

Git 提交

npx @angular/cli@11 update @angular/material@11 @angular/flex-layout@11.0.0-beta.33

【讨论】：

感谢您提供这个有效的解决方案。请注意，如果您将-C 附加到每个更新命令，那么它将在每个迁移步骤后自动提交

【参考方案3】：

我也有同样的问题，作为一个初学者很困惑

我最初尝试了这个命令，但我又遇到了另一个错误

ng update @angular/cli @angular/core

然后我找到了这个链接https://github.com/angular/angular-cli/issues/20843，一个人说要做这个全局cli命令，这似乎解决了创建新项目时的问题

npm i @angular/cli -g

我现在可以创建我的新项目命令，例如：

ng new example --routing false --style css --skip-git --skip-tests

【讨论】：

非常感谢分享！我今晚会试试这个并报告它有效

【参考方案4】：

Downgrad npm v6，我在谷歌搜索成功后尝试了一堆命令

npm -g i npm@^6
npm i
ng update @angular/cli@^12 @angular/core@^12

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案5】：

更新您的tsconfig.json，然后运行

sudo npm install --force