How do I deal with installing peer dependencies in Angular CLI?

Question

I've found myself in an almost endless cycle of errors when trying to update my Angular CLI and NPM. Every time I update, I am met with WARN messages telling me to install peer dependencies (see below), but each time I install a dependency, I am met with more WARN messages. Is there a better way of handling this situation or does it seriously take hours?

npm WARN @angular/animations@5.2.1 requires a peer of @angular/core@5.2.1 
but none is installed. You must install peer dependencies yourself.
npm WARN @angular/compiler-cli@5.1.0 requires a peer of typescript@>=2.4.2 
<2.6 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
@angular/core@^4.0.3 but none is installed. You must install peer 
dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
@angular/common@^4.0.3 but none is installed. You must install peer 
dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
@angular/forms@^4.0.3 but none is installed. You must install peer 
dependencies yourself.
npm WARN @schematics/angular@0.1.17 requires a peer of @angular-
devkit/core@0.0.29 but none is installed. You must install peer dependencies 
yourself.
npm WARN @schematics/angular@0.1.17 requires a peer of @angular-
devkit/schematics@0.0.52 but none is installed. You must install peer 
dependencies yourself.
npm WARN @schematics/schematics@0.0.11 requires a peer of @angular-
devkit/core@0.0.22 but none is installed. You must install peer dependencies 
yourself.
npm WARN angular2-notifications@0.7.4 requires a peer of 
@angular/core@^4.0.1 but none is installed. You must install peer 
dependencies yourself.
npm WARN angular2-notifications@0.7.4 requires a peer of 
@angular/common@^4.0.1 but none is installed. You must install peer 
dependencies yourself.
npm WARN angular2-notifications@0.7.4 requires a peer of @angular/platform-
browser@^4.0.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN angular2-notifications@0.7.4 requires a peer of 
@angular/animations@^4.0.1 but none is installed. You must install peer 
dependencies yourself.
npm WARN bootstrap@4.0.0-beta.2 requires a peer of jquery@1.9.1 - 3 but none 
is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.0.0-beta.2 requires a peer of popper.js@^1.12.3 but 
none is installed. You must install peer dependencies yourself.
npm WARN ng2-toasty@4.0.3 requires a peer of @angular/core@^2.4.7 || ^4.0.0 
but none is installed. You must install peer dependencies yourself.
npm WARN ngx-carousel@1.3.5 requires a peer of @angular/core@^2.4.0 || 
^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-carousel@1.3.5 requires a peer of @angular/common@^2.4.0 || 
^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsickle@0.25.5 requires a peer of typescript@>=2.4.2 <2.6 but none 
is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})

I know I must be doing something wrong, but I'm new to Angular.

score 95 · Accepted Answer · edited Dec 24 '22 at 05:58

Peer dependency warnings, more often than not, can be ignored. The only time you will want to take action is if the peer dependency is missing entirely, or if the version of a peer dependency is higher than the version you have installed.

Let's take this warning as an example:

npm WARN @angular/animations@5.2.1 requires a peer of @angular/core@5.2.1 but none is installed. You must install peer dependencies yourself.

With Angular, you would like the versions you are using to be consistent across all packages. If there are any incompatible versions, change the versions in your package.json, and run npm install so they are all synced up. I tend to keep my versions for Angular at the latest version, but you will need to make sure your versions are consistent for whatever version of Angular you require (which may not be the most recent).

In a situation like this:

npm WARN ngx-carousel@1.3.5 requires a peer of @angular/core@^2.4.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

If you are working with a version of Angular that is higher than 4.0.0, then you will likely have no issues. Nothing to do about this one then. If you are using an Angular version under 2.4.0, then you need to bring your version up. Update the package.json, and run npm install, or run npm install for the specific version you need. Like this:

npm install @angular/core@5.2.3 --save

You can leave out the --save if you are running npm 5.0.0 or higher, that version saves the package in the dependencies section of the package.json automatically.

In this situation:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

You are running Windows, and fsevent requires OSX. This warning can be ignored.

Thanks! Should I update the versions in the "dependencies" and "devDependencies" in my package.json or should I create a "peerDependencies" and add these versions to it? — tommy, Feb 05 '18 at 17:12
My comment about not having to worry about `devDependencies` isn't right. You will want to update version numbers in that section too. The Angular packages in that section should have the same version as the packages in the `dependencies` section. Change the versions there is something that may have to do as well. Sorry for any confusion! — R. Richards, Feb 05 '18 at 22:10
seems like a task for computers, all the information is in the package.json and my OS is obvious, it's not fun to learn these. One day people say "our ancestors suffered a lot to get us this point" — mkb, Apr 10 '19 at 16:42
@R.Richards writes "If you are working with a version of Angular that is higher than 4.0.0, then you will likely have no issues." Can the analyzer detect the presence of Angular higher than 4.0.0? If yes, then why show this warning? — chrisinmtown, Oct 09 '19 at 10:14
Sorry for being obtuse but I don't get why you get a warning like ` @angular/core@^2.4.0 || ^4.0.0 but none is installed` if you are working with a version of Angular that is higher than 4.0.0… Is it just because the version is off? — Yann, May 05 '20 at 01:45
What if we installed the latest angular version and some of the packages warn like this(There are few libraries I can see this error). While resolving: @dashjoin/json-schema-form@0.8.4 Found: @angular/common@13.2.0 Could not resolve dependency: peer @angular/common@"~11.2.12" from @dashjoin/json-schema-form@0.8.4 — Amith Dissanayaka, Apr 06 '22 at 02:57

Wojtek Dmyszewicz · Answer 2 · 2019-02-25T08:59:31.240

5

You can ignore the peer dependency warnings by using the --force flag with Angular cli when updating dependencies.

ng update @angular/cli @angular/core --force

For a full list of options, check the docs: https://angular.io/cli/update

edited Feb 25 '19 at 08:59

answered Feb 22 '19 at 01:28

Wojtek Dmyszewicz

4,188
5
30
42

7

I would find this answer more helpful if it included a quick explanation of what this does and why it helped you with the issue raised by the OP – JTech Feb 25 '19 at 01:21
@JTech I've updated my answer, thanks for the feedback. – Wojtek Dmyszewicz Feb 25 '19 at 09:02
using node js command prompt inside clientapp folder , it is working , many thanks – hosam hemaily Aug 24 '19 at 18:19

score 1 · Answer 3 · answered Jul 14 '21 at 07:17

Update your angular (globaly):

by updating with:

ng update @angular/cli @angular/core

or remove angular and reinstall it:

npm uninstall -g @angular/cli
npm install -g @angular/cli

After, if you want to use your old angular project (localy):

Test with npm list if some dependencies have changed and get this error:

npm ERR! peer dep missing: mydependencie, required by somecomponent

it's mean you have to update your project:

Then you can just, create a new project, paste your code and reinstall all depencies
Or install all dependencies required by npm list:

npm install mydependencie

score 0 · Answer 4 · answered Jan 30 '20 at 02:37

I found that running the npm install command in the same directory where your Angular project is, eliminates these warnings. I do not know the reason why.

Specifically, I was trying to use ng2-completer

$ npm install ng2-completer --save
npm WARN saveError ENOENT: no such file or directory, open 'C:\Work\foo\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Work\foo\package.json'
npm WARN ng2-completer@3.0.3 requires a peer of @angular/common@>= 6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-completer@3.0.3 requires a peer of @angular/core@>= 6.0.0 but noneis installed. You must install peer dependencies yourself.
npm WARN ng2-completer@3.0.3 requires a peer of @angular/forms@>= 6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN foo No description
npm WARN foo No repository field.
npm WARN foo No README data
npm WARN foo No license field.

I was unable to compile. When I tried again, this time in my Angular project directory which was in foo/foo_app, it worked fine.

cd foo/foo_app
$ npm install ng2-completer --save

score 0 · Answer 5 · answered Jul 10 '20 at 18:03

NPM package libraries have a section in the package.json file named peerDependencies. For example; a library built in Angular 8, will usually list Angular 8 as a dependency. This is a true dependency for anyone running less than version 8. But for anyone running version 8, 9 or 10, it's questionable whether any concern should be pursued.

I have been safely ignoring these messages on Angular Updates, but then again we do have Unit and Cypress Tests!

score 0 · Answer 6 · answered Aug 11 '23 at 21:24

As stated above these warnings can most often be ignored. However, if you have a lot of 3rd party dependencies when trying to upgrade these will often cause issues and will need to be updated as well.

A great resource for this is npm peer which will show you what versions work with each other. Just an FYI as I've been dealing with a bunch of this during an upgrade.

How do I deal with installing peer dependencies in Angular CLI?

6 Answers6

Linked