angular-cli: ng upgrade: incompatible peer dependency error prevents from auto-updating

Versions

Angular CLI: 6.0.1
Node: 9.11.1
OS: darwin x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@angular/cli                      6.0.1
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              5.5.10
typescript                        2.5.3
webpack                           4.6.0


macOS 10.11.6

Repro steps

  • Clone the upgrade branch of repo https://github.com/juristr/ng-upgrade-test
  • yarn install (or npm install => I used yarn)
  • Try upgrading the Angular dependencies, using for instance ng update @angular/core. I already performed the @angular/cli upgrade command which adjusts the angular.json etc.

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

I get the following output

❯ ng update @angular/core
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.5.3")
Incompatible peer dependencies found. See above.

Desired behavior

It should automatically update the Angular dependencies as well as RxJS and TypeScript (as described in the update.angular.io guide).

Mention any other details that might be useful (optional)

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 51
  • Comments: 46 (12 by maintainers)

Commits related to this issue

Most upvoted comments

Just so its noted, the workaround is 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.

ng update @ngrx/store --next --force

I could have faced incompatible peer dependency issues when i ran the command ng update @angular/core to update the core library of the existing angular project.

Issues

Package “@angular/cdk” has an incompatible peer dependency to “@angular/common” (requires “>=5.0.0-rc.0 <6.0.0||>=4.0.0 <5.0.0”, would install “6.0.0”). Package “codelyzer” has an incompatible peer dependency to “@angular/core” (requires “>=5.0.0-rc.0 <6.0.0||>=2.3.1 ❤️.0.0||>=4.0.0-beta <5.0.0”, would install “6.0.0”). Package “codelyzer” has an incompatible peer dependency to “@angular/compiler” (requires “>=5.0.0-rc.0 <6.0.0||>=2.3.1 ❤️.0.0||>=4.0.0-beta <5.0.0”, would install “6.0.0”).

in second time i used the following command to update the core library ng update @angulsar/core --next but still there an issue.

issue had fix when i use the following command with --force flag, ng update @angular/core --next --force

now, my project library has been updated from version 4 to 6. Well done 😃

Good Luck !!!

Happening on update to Angular 7 and TypeScript 3.1 too.

ng update @angular/core --next --force works for me

ng update --all --force this worked for me.

If anyone’s still running into this error you could try running

npm i --save-dev codelyzer@4.0.1 before running ng update @angular/core

instead of forcing ng update --next --force which ignores those warnings and installs beta packages.

I’m running into a similar issue when trying to update NgRx.

If I have all the @ngrx libraries installed and I run ng update @ngrx/store --next I get

Package "@ngrx/schematics" has a missing peer dependency of "@angular-devkit/core" @ "^0.6.0".

If I run yarn list @angular-devkit/core, I see

@angular-devkit/core@0.6.1

Hi, be careful with this command, ng update @ angular / core --next --force, I have used it to update from Angular 4 to 7 and now I have version 8.0.0-beta.3

I didn’t want to use --force as it installs unstable packages and also… we shouldn’t have to.

I found a solution to the above that worked for me. I installed the latest codelyzer

npm install codelyzer@latest --save-dev

then ran the ng update @whatever I needed to do and it worked with no complaints.

Hi i think some of the files corrected i am using angular 7 version ,
i have tried in many angles deleted directory and remove ng_modules and installed npm command also nothing happened , here i also used npm cache clean --force , then remove ng_modules then npm install , i have created 3 new projects and again getting the same issue please help with best solution ,

======================= error ============= ERROR in node_modules/rxjs/src/internal/scheduled/scheduled.ts(25,40): error TS2345: Argument of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerLike’ is not assignable to parameter of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerLike’. Types of property ‘schedule’ are incompatible. Type ‘<T>(work: (this: import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerAction<T>, state?: T) => void, delay?: number, state?: T) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription”).Subscription’ is not assignable to type ‘<T>(work: (this: import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerAction<T>, state?: T) => void, delay?: number, state?: T) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription”).Subscription’. Types of parameters ‘work’ and ‘work’ are incompatible. The ‘this’ types of each signature are incompatible. Type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerAction<T>’ is not assignable to type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerAction<T>’. Types of property ‘schedule’ are incompatible. Type ‘(state?: T, delay?: number) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription”).Subscription’ is not assignable to type ‘(state?: T, delay?: number) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription”).Subscription’. Type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription”).Subscription’ is not assignable to type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription”).Subscription’. Property ‘_parentOrParents’ is protected but type ‘Subscription’ is not a class derived from ‘Subscription’. node_modules/rxjs/src/internal/scheduled/scheduled.ts(27,37): error TS2345: Argument of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerLike’ is not assignable to parameter of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerLike’. node_modules/rxjs/src/internal/scheduled/scheduled.ts(29,35): error TS2345: Argument of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerLike’ is not assignable to parameter of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerLike’. node_modules/rxjs/src/internal/scheduled/scheduled.ts(31,38): error TS2345: Argument of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerLike’ is not assignable to parameter of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerLike’. node_modules/rxjs/src/internal/observable/from.ts(116,29): error TS2345: Argument of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerLike’ is not assignable to parameter of type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerLike’. Types of property ‘schedule’ are incompatible. Type ‘<T>(work: (this: import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerAction<T>, state?: T) => void, delay?: number, state?: T) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription”).Subscription’ is not assignable to type ‘<T>(work: (this: import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerAction<T>, state?: T) => void, delay?: number, state?: T) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription”).Subscription’. Types of parameters ‘work’ and ‘work’ are incompatible. The ‘this’ types of each signature are incompatible. Type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types”).SchedulerAction<T>’ is not assignable to type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types”).SchedulerAction<T>’. Types of property ‘schedule’ are incompatible. Type ‘(state?: T, delay?: number) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription”).Subscription’ is not assignable to type ‘(state?: T, delay?: number) => import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription”).Subscription’. Type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription”).Subscription’ is not assignable to type ‘import(“D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription”).Subscription’. Property ‘_parentOrParents’ is protected but type ‘Subscription’ is not a class derived from ‘Subscription’.

Not sure if it’s the same thing, but I’m getting errors like:

Package "bootstrap" has a missing peer dependency of "jquery" @ "1.9.1 - 3".

I’m using the bootstrap SCSS framework but have no intentions of ever including jQuery ofc. I dunno if this is a problem with bootstrap itself that it has jquery as a peerDep or if the problem is that CLI throws for peer dep WARN.

Is it perhaps possible to just force the ng update --all?

So I figured out that ng update --all doesn’t work as expected, so you better upgrade everything in order:

yarn global @angular/cli
ng update @angular/cli
yarn upgrade tsickle
ng update @angular/core
ng update @angular/material
ng update rxjs
yarn add @angular-devkit/schematics@^0.6.0 --dev
ng update @ngrx/store
ng update @nrwl/nx

Note that I had to update some dependencies because @angular/core installs typescript 2.9.2 and the version I had of tsickle didn’t supported it:

Package "tsickle" has an incompatible peer dependency to "typescript" (requires ">=2.4.2 <2.9", would install "2.9.2").

and also @ngrx/store had a missing dependency:

Package "@ngrx/schematics" has a missing peer dependency of "@angular-devkit/schematics" @ "^0.6.0".

Thanks for the great work!

@Riccardo-Andreatta ng update @angular/core --migrate-only --from=5 --to=6 --force. See more details in ng update --help or https://angular.io/cli/update.

Hi you need to upgrade jQuery to use bootstrap 4. In you package manager file change the version of jQuery. Like in my libman.json file i have it like this

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "twitter-bootstrap@4.1.3",
      "destination": "wwwroot/lib/bootstrap/dist",
      "files": [
        "js/bootstrap.min.js",
        "js/bootstrap.js",
        "css/bootstrap.min.css",
        "css/bootstrap-reboot.css",
        "css/bootstrap-grid.css",
        "css/bootstrap.css"
      ]
    },
    {
      "library": "jquery@3.3.1",
      "destination": "wwwroot/lib/jquery/dist",
      "files": [
        "jquery.min.js",
        "jquery.js"
      ]
    },
    {
      "library": "popper.js@1.14.4",
      "destination": "wwwroot/lib/popper.js/dist",
      "files": [
        "esm/popper-utils.min.js",
        "esm/popper.js",
        "umd/popper-utils.min.js",
        "umd/popper.min.js",
        "popper.min.js",
        "popper-utils.min.js"

      ]
    }
  ]
}

@clydin Hi, I was chatting about this in the Angular Slack with @filipesilva and he told me to open the issue here. Let me know if you need more info. Thanks a lot 👍

The --from and --to options will only affect the --migrate-only option. CLI versions 8.0+ will now error if the options are used incorrectly.

Yes , splaktar, good day, thanks for your revert, i will go through the angular bootstrapping guide, thank you.

The update with --force does work, but some packages like ng-packagr breaks due to tsickle version.

I have the same issue, but instead run ng update @angular/compiler-cli successfully without error.