Incompatible peer dependencies found - upgrading Angular from 8 to 9

Question

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?

Hacking

I'm getting exactly the same incompatible-peer-dependencies list. Were you able to fix this? The answer you have marked is not clear for me. Could you mention the steps that you took to solve it? – Waiver

Any update on this ? – Jude

did you find root cause or solution for same? I am facing same issue and do not want to use --force. TIA – Foible

Answer 1

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.

Hyperplasia

That version is updated/installed the previous step in the upgrade documentation: ng update @angular/core@8 @angular/cli@8 – Hacking

Then you should update your typescript version in the package.json I guess: "typescript": "~3.4",` – Hyperplasia

Package.json has ~3.4 and ng v reports it is 3.4.5. I will update the question with output from ng v. – Hacking

I think you misunderstood. The versions of @angular/core & @angular/cli you are trying to upgrade to have a dependency on a version of @ngtools/webpack that requires a higher version of TypeScript than what you have installed. – Hyperplasia

According to the document, the newer version of typescript is one of the outcomes of ng update. Document says "Your project has now been updated to TypeScript 3.7" – Hacking

Just updating the package.json didn't work. I had to install typescript 3.7.5 and then run the update command. – Hacking

Yeah, you'd have had to run npm update after updating your package.json, but glad you got it working. – Hyperplasia

Can you please update the answer to reflect what I did so I can accept it as the answer? – Hacking

I still get the error has missing peer dependency tslib – Juna

Answer 2

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

Underlinen

Answer 3

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.

Exchequer

Answer 4

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.

Equalizer

Answer 5

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.

Dagoba