UNMET PEER DEPENDENCY error installing @angular/animations

Question

I am trying to install @angular/animations. Apparently, this is a dependency of @angular/material as I am getting GET http://localhost:3000/@angular/animations 404 (Not Found) since installing material.

I am getting this error installing it:

> npm install @angular/animations --save
[email protected] D:\My Documents\Visual Studio 
2017\Projects\materialtest\frontend
+-- @angular/[email protected]
`-- UNMET PEER DEPENDENCY @angular/[email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 
(node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
[email protected]: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

This seems to be telling me that I need version 4.0.3 of core. But it also says I need 4.1.2. I have 4.0.3. Here is the output of my npm outdated:

Package                            Current   Wanted   Latest  Location
@angular/common                      4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/compiler                    4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/core                        4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/forms                       4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/http                        4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/platform-browser            4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/platform-browser-dynamic    4.0.3    4.0.3    4.1.2  angular-quickstart
@angular/router                      4.0.3    4.0.3    4.1.2  angular-quickstart
@types/jasmine                      2.5.36   2.5.36   2.5.47  angular-quickstart
@types/node                         6.0.73   6.0.73   7.0.18  angular-quickstart
jasmine-core                         2.4.1    2.4.1    2.6.1  angular-quickstart
protractor                          4.0.14   4.0.14    5.1.2  angular-quickstart
rxjs                                 5.0.1    5.0.1    5.4.0  angular-quickstart
systemjs                           0.19.40  0.19.40  0.20.12  angular-quickstart
tslint                              3.15.1   3.15.1    5.2.0  angular-quickstart
typescript                           2.1.6    2.1.6    2.3.2  angular-quickstart

Also, @angular/animations are already in my package.json: "@angular/animations": "^4.1.2", but the folder does not exist.

So how do I get animations installed? Do I need to update Angular, even though I just installed the latest angular-quickstart today? Is so, how? This post on how did not work for me (maybe because I am on windows?)

Or am I on the wrong path - all I want right now is @angular/material working so I can continue on my tutorial.

Answer 1

Angular needs every package of @angular to be in the same version(not must but need). Since you set @angular/animations to the latest version(v4.1.2), you have to edit your package.json and change packages of @angular to 4.1.2 and run npm install. Or else just install each of them manually by npm i @angular/xxx@latest --save.