Angular 14项目安装ng-recaptcha3时出现npm ERR! ERESOLVE错误求助

问题 #

将旧Angular 12项目按官方指南升级至Angular 14后，执行npm i ng-recaptcha3安装ng-recaptcha3时触发npm依赖解析错误。错误显示ng-recaptcha3@1.3.2要求的peer依赖@angular/common版本为^8.2.14，但当前项目使用的是@angular/common@14.2.0。即使新建Angular 14项目尝试安装，仍出现相同错误。

错误日志 #

me@computer:/home/me/projects/active/project1/repo1$ npm i ng-recaptcha3
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: repo1@1.0.0
npm ERR! Found: @angular/common@14.2.0
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.2.14" from ng-recaptcha3@1.3.2
npm ERR! node_modules/ng-recaptcha3
npm ERR!   ng-recaptcha3@"*" 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! 
npm ERR! See /home/me/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/me/.npm/_logs/2022-08-28T15_48_12_688Z-debug-0.log

ng version输出 #

Angular CLI: 14.2.1
Node: 18.2.0 (Unsupported)
Package Manager: npm 8.18.0 
OS: linux x64

Angular: 14.2.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1
@angular-devkit/build-angular   14.2.1
@angular-devkit/core            14.2.1
@angular-devkit/schematics      14.2.1
@angular/cli                    14.2.1
@angular/fire                   7.4.1
@schematics/angular             14.2.1
rxjs                            7.5.6
typescript                      4.7.4
    
Warning: The current version of Node (18.2.0) is not supported by Angular.

package.json内容 #

{
  "name": "repo1",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.1",
    "@angular/cli": "~14.2.1",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

解决方案 #

核心原因 #

ng-recaptcha3@1.3.2版本过于陈旧，仅适配Angular 8，未更新支持Angular 14，导致peer依赖冲突。该包已长期未维护，后续大概率不会推出兼容高版本Angular的更新。

可选解决路径 #

1. 临时规避（不推荐）
   执行安装命令时添加--legacy-peer-deps或--force参数，强制跳过依赖校验：

   npm i ng-recaptcha3 --legacy-peer-deps
   # 或
   npm i ng-recaptcha3 --force
   

   注意：此方法可能导致运行时出现未知错误，仅适合临时测试场景。

2. 替换为兼容库（推荐）
   选择维护活跃、支持Angular 14的reCAPTCHA集成库：

   • 使用ng-recaptcha（注意与ng-recaptcha3区分）：该库支持Angular 14及以上版本，可直接安装：

     npm i ng-recaptcha
     

   • 直接集成Google原生reCAPTCHA v3 JS API：无需依赖第三方库，通过在index.html中引入官方脚本，再在组件中调用API即可实现功能。

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