I am using

• Angular 14.2.6
• Node 16.17.0
• Npm 8.15.0

This is the output of ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.6
Node: 16.17.0
Package Manager: npm 8.15.0
OS: win32 x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1402.6
@angular-devkit/build-angular      14.2.6
@angular-devkit/core               14.2.6
@angular-devkit/schematics         14.2.6
@angular/cdk                       14.2.5
@angular/flex-layout               14.0.0-beta.41
@angular/material                  14.2.5
@angular/material-moment-adapter   14.2.5
@schematics/angular                14.2.6
rxjs                               7.5.7
typescript                         4.8.4

When I do npm instll to update my packages, I get following error:

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
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.2.6" from the root project
npm ERR!   peer @angular/common@"^14.0.0 || ^15.0.0" from @angular/[email protected]    
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^14.2.5" from the root project
npm ERR!     peer @angular/cdk@"^14.0.0" from @angular/[email protected]
npm ERR!     node_modules/@angular/flex-layout
npm ERR!       @angular/flex-layout@"^14.0.0-beta.41" from the root project      
npm ERR!     1 more (@angular/material)
npm ERR!   6 more (@angular/flex-layout, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^13.3.0" from [email protected]
npm ERR! node_modules/angular-user-idle
npm ERR!   angular-user-idle@"^3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^13.3.0" from [email protected]
npm ERR!   node_modules/angular-user-idle
npm ERR!     angular-user-idle@"^3.0.0" 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.

I understand I could try to use npm install --force or npm install --legacy-peer-deps as suggested in two last line in the error message above, however, the recommendation does not look encouraging given that it says "...to accept and incorrect (and potentially broken) dependency resolution."

I am not sure how to proceed? I dont think downgrading npm/node is a good suggestion either.

UPDATE

Following @skinks suggestion and adding "overrides" section to package.json like:

{
  ...
  ,
  "overrides": {
    "angular-user-idle": {
      "@angular/common": "$@angular/common", 
      "@angular/core": "$@angular/core"
    }
  },
  ...

leads to npm audit fix producing following:

# npm audit report

angular  *
Severity: moderate
angular vulnerable to regular expression denial of service (ReDoS) - https://github.com/advisories/GHSA-m2h2-264f-f486
Angular (deprecated package) Cross-site Scripting - https://github.com/advisories/GHSA-prc3-vjfx-vhm9
fix available via `npm audit fix`
node_modules/angular

CodePudding user response：

angular-user-idle has angular 13 as dependency, there is not much else to do than to try the --force install to see if the library works well with Angular 14.

Since Angular 14 doesn't bring much breaking changes, it should be fine.

CodePudding user response：

It's possible to override the peer dependency of the angular-user-idle package:

package.json

{
  ...
  "overrides": {
    "angular-user-idle": {
      "@angular/common": "$@angular/common", // means: use the version from the project instead of the one that the package actually depends on
      "@angular/core": "$@angular/core"
    }
  }
}

This approach is preferable to the --force flag because you have fine control over the dependencies.