Unable to install ng-recaptcha3 in angular 14 project - npm ERR! code ERESOLVE-CodePudding

I have an old angular project (v12) and I need to migrate it to latest (v14). So, I followed the angular update guide and ran the ng update @angular/core@13 @angular/cli@13 and then ng update @angular/core@14 @angular/cli@14 commands. Now, I am trying to install ng-recaptcha3. However, I get these errors on console/terminal, stopping me from adding ng-recaptcha3.

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: [email protected]
npm ERR! Found: @angular/[email protected]
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 [email protected]
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

This is my ng version output

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.

This is my package.json file

{
  "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"
  }
}

I even tried to create a new angular project using ng new repo1 and tried to install the ng-recaptcha3, ended up with same result - npm ERR! code ERESOLVE Could any one please help me understand what am I doing wrong or what steps to be taken to integrate ng-recaptcha3?

CodePudding user response：

I believe this is just an npm safety thing now a days. You need to run npm i ng-recaptcha3 --legacy-peer-deps and I believe it should work.

NPM has stopped auto installing legacy packages automatically so that it forces you to know the "risk" you're taking. Nothing to really concern yourself with here