3

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
angular-quickstart@1.0.0 D:\My Documents\Visual Studio 
2017\Projects\materialtest\frontend
+-- @angular/animations@4.1.2
`-- UNMET PEER DEPENDENCY @angular/core@4.0.3
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 
fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})
npm WARN @angular/animations@4.1.2 requires a peer of @angular/core@4.1.2 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.

Lucas
  • 9,871
  • 5
  • 42
  • 52
Brad Mathews
  • 1,567
  • 2
  • 23
  • 45

2 Answers2

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.

Pengyy
  • 37,383
  • 15
  • 83
  • 73
  • *Since you set @angular/material to the latest version(v4.1.2)...* I didn't see where he sets it to **4.1.2**. Also. the latest version of `@angular/material` is `2.0.0-beta.5`... – developer033 May 16 '17 at 01:45
  • @developer033 oops, I was meaning @angular/animations :P – Pengyy May 16 '17 at 02:03
  • Ok, I did that (up to 4.1.3 now) - my search for updating Angular had found other methods which did not seem to work. But now I am back to `npm start` not working. Same as [this post:](http://stackoverflow.com/questions/40331039/material-design-for-angular-2-throws-elifecycle). – Brad Mathews May 19 '17 at 17:23
1

I am working on the Pluralsight tutorial and had the same issue. I updated package.json to include: "@angular/animations": "^4.0.0", as a dependency, since I had "@angular/core": "^4.0.0" as a dependency. Therefore they match, and it seemed to work.

Yahya
  • 13,349
  • 6
  • 30
  • 42
judy
  • 11
  • 1
  • I did that on a different project this afternoon - working the versions of everything in my package.json until I received no more errors or warnings doing an `npm install`. Tedious and annoying (two words which seem to sum up "modern" web development) but that seemed to work for me as well. – Brad Mathews May 24 '17 at 01:25