Module not found: Error: Can't resolve '@angular/animations'

Question

After using "npm install" and starting local server by "npm start" I started getting this error:-

ERROR in ./~/@angular/material/@angular/material.es5.js
Module not found: Error: Can't resolve '@angular/animations' in '/home/ashvini/Desktop/HN-Angular2/node_modules/@angular/material/@angular'
 @ ./~/@angular/material/@angular/material.es5.js 20:0-81
 @ ./src/app/app.module.ts
 @ ./src/main.ts`enter code here`
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

This is related to angular material design but I am not able to understand what I need to do to resolve this issue.

Before "npm install" it was working fine.

I assume you need to import the `AnimationModule` in your `app.module.ts` — alex kucksdorf, Apr 11 '17 at 14:19

SrAxi · Accepted Answer · 2017-04-11T15:11:56.850

79

In app.module add this:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

And lather in the module add it to imports:

imports: [BrowserAnimationsModule]

And remove the @angular/animations import statement.

Maybe by applying npm install you updated your Angular version from v.2 to v.4.

UPDATE:

or just add this to your package.json (Choose the version you need):

"dependencies": {
    "@angular/animations": "^4.0.1",
}

Once you added this to your dependencies, apply npm install again.

UPDATE 2:

Even a quicker way:

npm install @angular/animations --save

edited Apr 11 '17 at 15:11

answered Apr 11 '17 at 14:39

SrAxi

19,787
11
46
65

Now I am getting this error `ERROR in Error encountered resolving symbol values statically. Could not resolve @angular/platform-browser/animations relative to /home/ashvini/Desktop/HN-Angular2/src/app/app.module.ts., resolving symbol AppModule in /home/ashvini/Desktop/HN-Angular2/src/app/app.module.ts, resolving symbol AppModule in /home/ashvini/Desktop/HN-Angular2/src/app/app.module.ts ERROR in /home/ashvini/Desktop/HN-Angular2/src/app/app.module.ts (2,41): Cannot find module '@angular/platform-browser/animations'.)` – Ashvini Maurya Apr 11 '17 at 14:48
Try to do what I explain on my Update. Initially I thought you updated your Angular version, but I think you just lack the dependency for `@angular/animations`. – SrAxi Apr 11 '17 at 14:52
Apply `npm install`after you added the dependencies. But undo the first thing that I said, the `BrowserAnimationsModule` modification. – SrAxi Apr 11 '17 at 14:54
@Ashvini Check my second update. That should solve the error that you posted. – SrAxi Apr 11 '17 at 15:12
Hey @SrAxi, thanks for your response. With the first update that error is resolved but now I have another saying `Unhandled Promise rejection: Template parse errors: 'ng-template' is not a known element:` – Ashvini Maurya Apr 11 '17 at 15:20
@Ashvini I'm glad my answer solved your problem. Your new error is because in Angular 4 ` – SrAxi Apr 11 '17 at 15:24
@Ashvini If you have more questions about this I suggest you do some research on Angular 4. This could help: http://stackoverflow.com/questions/43116428/is-it-worth-to-migrate-from-angular-2-to-angular-4 Anyways, your OP (Original Post) has been answered if I am not mistaken. Good luck mate! ;) – SrAxi Apr 11 '17 at 15:25
1

Even faster way `npm i @angular/animations --save` ;) – Vivek Shankar Aug 28 '17 at 06:45
I also had to add `'@angular/animations':'npm:@angular/animations/bundles/animations.umd.js'` to my `systemjs.config.js`. – Vivek Shankar Aug 28 '17 at 07:02

score 6 · Answer 2 · answered Apr 12 '17 at 11:45

6

In package.json remove (^) "@angular/material": "^2.0.0-beta.2". In latest angualr.material we are getting this error.

answered Apr 12 '17 at 11:45

Md Ghouse

301
1
3
10

Thanks! This was the solution for me – timbillstrom Apr 13 '17 at 07:15

score 0 · Answer 3 · answered Apr 12 '17 at 14:17

0

npm install will install the latest Angular Framework, which is now 4.

the solution is above mentioned already by others.

Cheers.

answered Apr 12 '17 at 14:17

scottzh

11

4

Hi and welcome to StackOverflow! I'm afraid this is commentary on another post, not an answer. Once you have sufficient reputation you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment) – Eel Lee Apr 12 '17 at 14:52

score -4 · Answer 4 · edited Mar 13 '18 at 12:28

-4

I search a lot seriously then I found that in my project

node_modules/@angular/

I have by mistake have to install file which due to error install half and named animation So as I delete that file error get solved.I think it may be due to multiple files on root and project folder.

edited Mar 13 '18 at 12:28

Sunil Garg

14,608
25
132
189

answered Mar 13 '18 at 10:13

Himanshu Joshi

100
1
5

I have an error due to a confusion of animation file. – Himanshu Joshi Mar 13 '18 at 10:14

Module not found: Error: Can't resolve '@angular/animations'

4 Answers4