ERESOLVE unable to resolve dependency tree while installing ngx-toastr on angular 13

Question

Getting below error while trying to install ngx-toastr on my angular 13

    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@"~13.0.0" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer @angular/common@">=14.0.0-0" from [email protected]
    npm ERR! node_modules/ngx-toastr
    npm ERR!   ngx-toastr@"*" 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\xyz\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\xyz\AppData\Local\npm-cache\_logs\2022-06-27T09_19_20_284Z-debug.log

Answer 1

This worked for me:

1. Delete node_modules, package-lock.json

2. Update npm -> sudo npm install -g npm (on mac)

3. Run -> npm install in angular project folder

4. Run npm install ngx-toastr --force

5. Update angular.json file ("styles" array) "./node_modules/font-awesome/css/font-awesome.css" "./node_modules/ngx-toastr/toastr.css""

if you get error about "font-awesome" Run -> npm install --save font-awesome --force

Second way (this also worked):

1. Update npm
2. Update Angular application following instructions from: https://update.angular.io/
3. Run: npm install ngx-toastr
4. Run: npm install --save font-awesome
5. Update angular.json file ("styles" array) "./node_modules/font-awesome/css/font-awesome.css" "./node_modules/ngx-toastr/toastr.css""

Hope this will help.