Getting warnings and errors related to the conflicts in dependencies after adding angular-oauth2-oidc dependency in package.json

[MUsman1992]

I am working on the angular project. My package.json file is given below:

{
    "name": "angular.io-example",
    "version": "0.0.0",
    "description": "Example project from an angular.io guide.",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "watch": "ng build --watch --configuration development",
      "test": "ng test",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@ag-grid-community/angular": "^26.0.0",
      "@ag-grid-community/client-side-row-model": "^26.0.0",
      "@ag-grid-community/core": "^26.0.0",
      "@ag-grid-community/infinite-row-model": "^26.0.0",
      "@ag-grid-enterprise/charts": "^26.0.0",
      "@ag-grid-enterprise/core": "^26.0.0",
      "@ag-grid-enterprise/menu": "^26.0.0",
      "@ag-grid-enterprise/row-grouping": "^26.0.0",
      "@angular/animations": "~12.2.10",
      "@angular/cdk": "~12.2.10",
      "@angular/common": "~12.2.10",
      "@angular/compiler": "~12.2.10",
      "@angular/core": "~12.2.10",
      "@angular/flex-layout": "~12.0.0-beta.35",
      "@angular/forms": "~12.2.10",
      "@angular/material": "~12.2.10",
      "@angular/platform-browser": "~12.2.10",
      "@angular/platform-browser-dynamic": "~12.2.10",
      "@angular/router": "~12.2.10",
      "@fortawesome/fontawesome-free": "^5.15.4",
      "@stomp/rx-stomp": "^1.1.4",
      "@webcomponents/custom-elements": "^1.5.0",
      "ajv": "^8.6.3",
      "angular-oauth2-oidc": "^12.1.0",
      "angular-split": "^5.0.0",
      "array-flat-polyfill": "^1.0.1",
      "classlist.js": "^1.1.20150312",
      "core-js": "^3.18.3",
      "lodash": "~4.17.21",
      "mat-progress-buttons": "~9.3.1",
      "material-icons": "^1.10.6",
      "ngx-infinite-scroll": "^10.0.1",
      "normalize-path": "^3.0.0",
      "rxjs": "^7.4.0",
      "tslib": "^2.0.0",
      "typeface-roboto": "1.1.13",
      "web-animations-js": "^2.3.2",
      "zone.js": "~0.11.4"
    },
    "devDependencies": {
      "@angular-builders/custom-webpack": "~12.1.3",
      "@angular-devkit/build-angular": "~12.2.10",
      "@angular-eslint/builder": "^12.6.0",
      "@angular-eslint/eslint-plugin": "^12.6.0",
      "@angular-eslint/eslint-plugin-template": "^12.6.0",
      "@angular-eslint/schematics": "^12.6.0",
      "@angular-eslint/template-parser": "^12.6.0",
      "@angular/cli": "~12.2.10",
      "@angular/compiler-cli": "~12.2.10",
      "@angular/language-service": "~12.2.10",
      "@types/fs-extra": "^9.0.13",
      "@types/jasmine": "~3.10.0",
      "@types/jasminewd2": "~2.0.10",
      "@types/node": "^16.11.1",
      "@typescript-eslint/eslint-plugin": "^4.28.2",
      "@typescript-eslint/parser": "^4.28.2",
      "async": "^3.2.1",
      "codelyzer": "^6.0.2",
      "cssnano-preset-default": "~5.1.4",
      "eslint": "^7.26.0",
      "eslint-config-airbnb-base": "^14.2.1",
      "eslint-config-airbnb-typescript": "^14.0.1",
      "eslint-config-prettier": "^8.3.0",
      "eslint-plugin-rxjs": "^4.0.0",
      "fs-extra": "^10.0.0",
      "https-proxy-agent": "^5.0.0",
      "jasmine-core": "^3.10.0",
      "jasmine-spec-reporter": "~7.0.0",
      "karma": "~6.3.4",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage": "~2.2.0",
      "karma-jasmine": "~4.0.1",
      "karma-jasmine-html-reporter": "^1.7.0",
      "karma-junit-reporter": "^2.0.1",
      "karma-sabarivka-reporter": "~3.3.1",
      "karma-typescript": "^5.5.2",
      "ng-mocks": "^13.1.0",
      "ng-packagr": "^12.2.3",
      "npm-run-all": "^4.1.5",
      "prettier": "^2.4.1",
      "prettier-eslint": "^13.0.0",
      "protractor": "~7.0.0",
      "rimraf": "^3.0.2",
      "ts-node": "~10.3.0",
      "typescript": "~4.3.5",
      "wait-on": "^6.0.0",
      "webpack": "^5.61.0"
    }
  }

The problem is that when I add angular-oauth2-oidc dependency and use command npm install, I get errors. I had to use npm install --force command but still I get warnings which are given below

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-plugin-rxjs@4.0.4
npm WARN Found: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^7.26.0" from the root project      
npm WARN   19 more (@angular-eslint/builder, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.0.0" from eslint-plugin-rxjs@4.0.4
npm WARN node_modules/eslint-plugin-rxjs
npm WARN   dev eslint-plugin-rxjs@"^4.0.0" from the root project
npm WARN
npm WARN Conflicting peer dependency: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^8.0.0" from eslint-plugin-rxjs@4.0.4
npm WARN   node_modules/eslint-plugin-rxjs
npm WARN     dev eslint-plugin-rxjs@"^4.0.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mat-progress-buttons@9.3.1
npm WARN Found: @angular/cdk@12.2.13
npm WARN node_modules/@angular/cdk
npm WARN   @angular/cdk@"~12.2.10" from the root project
npm WARN   2 more (@angular/flex-layout, @angular/material)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/cdk@"^11.0.3" from mat-progress-buttons@9.3.1
npm WARN node_modules/mat-progress-buttons
npm WARN   mat-progress-buttons@"~9.3.1" from the root project
npm WARN
npm WARN Conflicting peer dependency: @angular/cdk@11.2.13
npm WARN node_modules/@angular/cdk
npm WARN   peer @angular/cdk@"^11.0.3" from mat-progress-buttons@9.3.1
npm WARN   node_modules/mat-progress-buttons
npm WARN     mat-progress-buttons@"~9.3.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mat-progress-buttons@9.3.1
npm WARN Found: @angular/common@12.2.16
npm WARN node_modules/@angular/common
npm WARN   @angular/common@"~12.2.10" from the root project
npm WARN   11 more (@ag-grid-community/angular, @angular/cdk, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/common@"^11.0.5" from mat-progress-buttons@9.3.1
npm WARN node_modules/mat-progress-buttons
npm WARN   mat-progress-buttons@"~9.3.1" from the root project
npm WARN
npm WARN Conflicting peer dependency: @angular/common@11.2.14
npm WARN node_modules/@angular/common
npm WARN   peer @angular/common@"^11.0.5" from mat-progress-buttons@9.3.1
npm WARN   node_modules/mat-progress-buttons
npm WARN     mat-progress-buttons@"~9.3.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mat-progress-buttons@9.3.1
npm WARN Found: @angular/core@12.2.16
npm WARN node_modules/@angular/core
npm WARN   @angular/core@"~12.2.10" from the root project
npm WARN   13 more (@ag-grid-community/angular, @angular/animations, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"^11.0.5" from mat-progress-buttons@9.3.1
npm WARN node_modules/mat-progress-buttons
npm WARN   mat-progress-buttons@"~9.3.1" from the root project
npm WARN 
npm WARN Conflicting peer dependency: @angular/core@11.2.14
npm WARN node_modules/@angular/core
npm WARN   peer @angular/core@"^11.0.5" from mat-progress-buttons@9.3.1
npm WARN   node_modules/mat-progress-buttons
npm WARN     mat-progress-buttons@"~9.3.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mat-progress-buttons@9.3.1
npm WARN Found: @angular/material@12.2.13
npm WARN node_modules/@angular/material
npm WARN   @angular/material@"~12.2.10" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/material@"^11.0.3" from mat-progress-buttons@9.3.1
npm WARN node_modules/mat-progress-buttons
npm WARN   mat-progress-buttons@"~9.3.1" from the root project
npm WARN
npm WARN Conflicting peer dependency: @angular/material@11.2.13
npm WARN node_modules/@angular/material
npm WARN   peer @angular/material@"^11.0.3" from mat-progress-buttons@9.3.1
npm WARN   node_modules/mat-progress-buttons
npm WARN     mat-progress-buttons@"~9.3.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-etc@5.2.0
npm WARN Found: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"^7.26.0" from the root project
npm WARN   19 more (@angular-eslint/builder, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.0.0" from eslint-etc@5.2.0
npm WARN node_modules/eslint-plugin-rxjs/node_modules/eslint-etc
npm WARN   eslint-etc@"^5.1.0" from eslint-plugin-rxjs@4.0.4
npm WARN   node_modules/eslint-plugin-rxjs
npm WARN
npm WARN Conflicting peer dependency: eslint@8.24.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^8.0.0" from eslint-etc@5.2.0
npm WARN   node_modules/eslint-plugin-rxjs/node_modules/eslint-etc
npm WARN     eslint-etc@"^5.1.0" from eslint-plugin-rxjs@4.0.4
npm WARN     node_modules/eslint-plugin-rxjs

up to date, audited 1899 packages in 8s

173 packages are looking for funding
  run `npm fund` for details

10 vulnerabilities (6 moderate, 4 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

If I use command npm list for any dependency for which I am getting warnings, for example if I type command npm list @angular/core I am getting these errors

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

├─┬ @ag-grid-community/angular@26.2.0
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/animations@12.2.16
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/cdk@12.2.13
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/common@12.2.16
│ └── @angular/core@12.2.16 deduped
├── @angular/core@12.2.16
├─┬ @angular/flex-layout@12.0.0-beta.35
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/forms@12.2.16
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/material@12.2.13
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/platform-browser-dynamic@12.2.16
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/platform-browser@12.2.16
│ └── @angular/core@12.2.16 deduped
├─┬ @angular/router@12.2.16
│ └── @angular/core@12.2.16 deduped
├─┬ angular-oauth2-oidc@12.1.0
│ └── @angular/core@12.2.16 deduped
├─┬ angular-split@5.0.0
│ └── @angular/core@12.2.16 deduped
├─┬ codelyzer@6.0.2
│ └── @angular/core@9.0.0
├─┬ mat-progress-buttons@9.3.1
│ └── @angular/core@12.2.16 deduped invalid: "^11.0.5" from node_modules/mat-progress-buttons
└─┬ ng-mocks@13.5.2
  └── @angular/core@12.2.16 deduped invalid: "^11.0.5" from node_modules/mat-progress-buttons

npm ERR! code ELSPROBLEMS
npm ERR! invalid: @angular/core@12.2.16 C:\Users\usajid\Desktop\testapp\node_modules\@angular\core

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\usajid\AppData\Local\npm-cache\_logs\2022-09-28T08_41_27_599Z-debug-0.log

Can anyone tell me how to fix this issue?