Cannot find module angular/animations

Question

I am using webpack in angular2 and when i try to run my app i get an error stating

Cannot find module \"@angular/animations\"

Answer 1

You are on the right track, but just close! You can see in this discussion here, that animations was taken out of the core. Furthermore, hyphenated names are apparently being done away with - so angular animations is now @angular/animations, just as @angular/angular-cli has become @angular/cli.

So, in order to (hopefully) resolve your issue - you should do the following:

Update to Angular 4 in your project. You will need to run the following in order to do so: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest --save and you also need to update Typescript with npm install typescript@latest --save

That should do the trick.

If it does not do the trick, I would suggest checking your json package and making sure you bumped up to 4.0 in all the core aspects along with the now separate animations segment. Then, delete your node modules folder, clear your cache, and run a clean install with the update package, like so:

>$  rm -rf node_modules
>$  npm cache clear
>$  npm install

It is a little hectic right now with a lot of different people contributing a lot of changes and fixes to the core feature set, and then other parts of Angular being caught up with the core, so I would advise moving forward carefully with any project you are on, in very methodical steps, so that you can address issues that come up one by one (and easier to find/fix).

Hope this helps!

Answer 2

Looks like in Angular 2 this was a part of core, as shown in the archived documentation:

import { Component, Input, trigger, state, style, transition, animate } from '@angular/core';

Answer 3

@angular/animimations was introduced in version 4.0.0 (release candidate). You'll need to update to angular4.

Answer 4

You must import angular animation module like this:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import {trigger,state,style,animate,transition}from '@angular/animations';

Answer 5

Perform below steps to make it work:

1. npm install @angular/animations@latest --save

2. import "BrowserAnimationsModule" from "@angular/platform-browser/animations" in your root NgModule (Without this, your code will compile and run, but animations will trigger an error)

3. In your component use imports from the new package like this - " import { trigger, state, style, transition, animate } from '@angular/animations'; "

This worked for me.

Answer 6

I have done this steps:

https://github.com/mgechev/angular-seed/issues/1880#issuecomment-290557768

I'll quote:

I had the same issue upgrading from 2.0 to 4.0. In the end I was missing the following from my systemjs.config.js:

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

At first I had the first and third line - everything started working once I added the second line for @angular/animations/browser.

this worked for me and i can see fixed most of cases.