CODEWITHSUNDEEP
angular
workvact
workvact

Reputation: 675

Incompatible peer dependencies found - upgrading Angular from 8 to 9

I am following the official document to upgrade.

This step completed without any errors.

ng update @angular/core@8 @angular/cli@8

Next step failed.

ng update @angular/core @angular/cli
The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 45 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular/core" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/animations" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/compiler" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/forms" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/common" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-browser" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/compiler-cli" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/router" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-browser-dynamic" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@ngtools/webpack" has an incompatible peer dependency to "typescript" (requires ">=3.4 < 3.6", would install "3.7.5").
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.

I checked the node_modules and the correct version of tslib is installed. I manually added the tslib entry and ran npm install to see if the error goes away.

  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.6.4",
    "npm": "^6.13.7",
    "rxjs": "^6.5.4",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.803.25",
    "@angular-devkit/build-angular": "^0.803.25",
    "@angular-devkit/build-optimizer": "^0.803.25",
    "@angular-devkit/build-webpack": "^0.803.25",
    "@angular-devkit/core": "^8.3.25",
    "@angular-devkit/schematics": "^8.3.25",
    "@angular/cli": "^8.3.25",
    "@angular/compiler-cli": "^8.2.14",
    "@ngtools/webpack": "^8.3.25",
    "@schematics/angular": "^8.3.25",
    "@schematics/update": "^0.803.25",
    "@types/jasmine": "^3.5.4",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.12.27",
    "tslib": "^1.10.0",
    "codelyzer": "^5.2.1",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "rxjs-tslint": "^0.1.7",
    "ts-node": "^8.6.2",
    "tslint": "^5.20.1",
    "typescript": "~3.4",
    "webpack": "^4.41.6",
    "webpack-dev-server": "^3.10.3"
  }

ng v output

Angular CLI: 8.3.25
Node: 12.13.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.24
@angular-devkit/build-angular     0.803.25
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.25
@angular-devkit/core              8.3.24
@angular-devkit/schematics        8.3.24
@angular/cli                      8.3.25
@ngtools/webpack                  8.3.24
@schematics/angular               8.3.24
@schematics/update                0.803.24
rxjs                              6.5.4
typescript                        3.4.5
webpack                           4.41.5

I haven't tried to use --force option. Is there another way?

Upvotes: 37

Views: 124543

Answers (5)

Arsen Khachaturyan
Arsen Khachaturyan

Reputation: 8320

In my case, I certainly didn't want to use the --force for the update, leaving potential problems for later.

Using the npm update didn't help either cause the problematic library(for me, it was @ng-bootstrap) version was a specific binding with the older version of Angular (in my case, Angular version 12).

So, I've uninstalled the conflicting library, then made the Angular upgrade and installed the library again. Of course, as I was using the logic from the older version of the bootstrap, I had to replace those usages manually.

Upvotes: 2

Daniel Danielecki
Daniel Danielecki

Reputation: 10502

ng update @angular/core @angular/cli --force might be needed with the --force flag, see an original answer of an Angular core member.

Upvotes: 11

pk_code
pk_code

Reputation: 2766

In my case, the workaround was to use the --force flag when running ng update [package] to override the dependency issues.

This will upgrade the packages anyway, and you can verify your app with the updated dependencies. If that third party dependency still needs to be updated because of breaking changes, then that package will need to be updated.

Upvotes: 4

Shivek Parmar
Shivek Parmar

Reputation: 2993

In my case accepted answer did not work. So I executed the following command and it worked for me.

npm install @angular/cli@latest @angular-devkit/build-angular@latest  --save-dev

But I did this on one of my local project not the global angular version on the system.

Upvotes: 1

DSN
DSN

Reputation: 397

Looks like you glanced over one of the errors:

Package "@ngtools/webpack" has an incompatible peer dependency to "typescript" (requires ">=3.4 < 3.6", would install "3.7.5").

Try a lower version of @ngtools/webpack that works with TypeScript 3.4 to 3.5.

Alternatively, update your TypeScript version in the package.json to 3.7.5 and run npm update, then you should be able to update @angular/core & @angular/cli.

Upvotes: 24

Related Questions