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.

Answer 1

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

Answer 2

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