As I delve into the world of Angular and self-teaching, I encountered an issue after importing numerous new components into my project. Upon deleting the node_modules folder and running npm install, I am faced with the following error:
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0c1d1d010c40060c19190c2d5d435d435d">[email protected]</a>
npm ERR! Found: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f3fffdfdfffed0a1a2bea2bea1a6">[email protected]</a>
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~12.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.0.0 || ^15.0.0" from @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e182858aa1d0d5cfd1cfd3">[email protected]</a>
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/cdk@"14.0.2" 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 C:\Users\kavis\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kavis\AppData\Local\npm-cache\_logs\2022-06-20T10_45_13_413Z-debug-0.log
The error suggests a potential mismatch due to different versions within the dependencies. I attempted solutions like running npm install @angular/cdk@latest and ng update @angular/common, but they did not yield results. Even deleting node modules and package-lock.json did not fix the issue during npm install.
I tried forcing npm install, only to encounter another issue preventing my project from running smoothly. Any suggestions on how to address this error would be greatly appreciated.
Thank you.
Here is the content of my package.json file:
{
"name": "appla-katta",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "node build && firebase deploy",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^13.3.2",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/fire": "github:angular/fire",
"@angular/flex-layout": "^13.0.0-beta.38",
"@angular/forms": "~12.2.0",
"@angular/material": "^13.3.2",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@auth0/auth0-angular": "^1.9.0",
"@fortawesome/fontawesome-free": "^6.1.1",
"angularfire2": "^5.4.2",
"bootstrap": "^5.1.3",
"cors": "^2.8.5",
"firebase": "^7.24.0",
"json-server": "^0.17.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.7",
"@angular/cli": "~12.2.7",
"@angular/compiler-cli": "~12.2.0",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
I also had a package-lock.json file which I have since removed.