Migration failed: Incompatible peer dependencies found

Question

i'm new with angular and trying to upgrade from 9.0.0 to 9.1.11 to upgrade my typescript from 3.7.5 to 3.8 to use countries-map plugin in my app.

When I run the command ng update @angular/[email protected] @angular/[email protected] i got

Using package manager: 'npm' Collecting installed dependencies... Found 68 dependencies. Fetching dependency metadata from registry...
                  Package "yamapng" has an incompatible peer dependency to "@angular/common" (requires "^7.1.0" (extended), would install "9.1.12").
                  Package "yamapng" has an incompatible peer dependency to "@angular/core" (requires "^7.1.0" (extended), would install "9.1.12").
                  Package "angular-svg-round-progressbar" has an incompatible peer dependency to "zone.js" (requires "^0.9.0", would install "0.10.3"). × Migration failed: Incompatible peer dependencies found. Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together. You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.   See "C:\Users\koste\AppData\Local\Temp\ng-If5zs2\angular-errors.log" for further details.

How could i upgrade all packages automatically ? If not possible, i safely upgrade the others plugin ? I don't really understand the errors even looking on others same errors on internet.

My package.json is very simple

{
  "name": "vien-angular-start",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --configuration=production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "~9.0.0",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.2",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@auth0/angular-jwt": "^4.1.2",
    "@aws-amplify/ui-angular": "^0.2.4",
    "@glidejs/glide": "^3.4.1",
    "@ng-select/ng-select": "^3.7.0",
    "@ngx-translate/core": "^11.0.1",
    "@stripe/stripe-js": "^1.11.0",
    "@swimlane/ngx-datatable": "^16.0.3",
    "angular-archwizard": "^5.0.0",
    "angular-calendar": "^0.28.2",
    "angular-svg-round-progressbar": "^3.0.1",
    "angular2-hotkeys": "^2.1.5",
    "angular2-notifications": "^3.0.0",
    "aws-amplify": "^3.0.10",
    "buffer": "^5.6.0",
    "chart.js": "^2.9.3",
    "date-fns": "^2.8.0",
    "firebase": "^7.8.1",
    "intl-tel-input": "^14.1.0",
    "ng2-nouislider": "^1.8.2",
    "ngx-bootstrap": "^5.3.2",
    "ngx-contextmenu": "^5.3.0",
    "ngx-cookie-service": "^3.0.4",
    "ngx-dropzone": "^2.2.2",
    "ngx-dropzone-wrapper": "^8.0.0",
    "ngx-ellipsis": "^2.1.2",
    "ngx-lightbox": "^2.1.1",
    "ngx-perfect-scrollbar": "^8.0.0",
    "ngx-quill": "^7.3.11",
    "ngx-sortablejs": "^3.1.3",
    "nouislider": "^14.1.1",
    "quill": "^1.3.7",
    "rxjs": "~6.5.4",
    "sortablejs": "^1.9.0",
    "tslib": "^1.10.0",
    "video.js": "^7.6.6",
    "yamapng": "^2.0.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ng-swagger-gen": "^2.3.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "^3.8.3"
  }
}

I upgrade typescript to "typescript": "^3.8.3" but still have same issues

Answer 1

The latest version of yamapng as of this writing is two years old and was written to work with @angular/common version 7. But you're running version 9. In the past, this wouldn't have mattered, but you've probably recently updated to npm@7 which now flags these issues. (There is a similar issue with angular-svg-round-progressbar and zone.js.)

You have many options:

• Use the --force flag as suggested in the error message.
• A better option is to use the --legacy-peer-deps option.
• You can downgrade to npm version 6.
• Find a replacement for yamapng or ask the maintainer to update/publish a new version.
• ...and many other options that start to get a bit in the weeds. You can use npx to run npm version 6 for just the one command, for example. Or patch the package version requirements if you're confident it will work with the different version of the peer dependency.