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"

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.1.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-server": "^0.9.0",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "primeng": "^4.0.0-rc.1",
    "protractor": "~4.0.14",
    "reflect-metadata": "^0.1.10",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10",
    "typings": "^2.1.0",
    "webpack": "^2.2.1"
  },
  "repository": {},
  "main": "index.js"
}

My webpack.config.js file is

var htmlWebPack = require('html-webpack-plugin');

module.exports = {
    entry: "./app/main.ts",
    output: {
        path: 'dist',
        filename: "bundle.js"
    },
    module: {
        loaders: [
          {
              test: /\.tsx?$/,
              loader: 'awesome-typescript-loader'
          }
        ]
    },
    plugins: [
    new htmlWebPack({
        template: './index.html'
    })
    ]
};

When I run the command like npm start, I get an error as mentioned above.

I even tried to install angular-animate using this command

npm install angular-animate

This is the error message I get

I also tried to uninstall angular-animate with the command

npm uninstall angular-animate

but it doesn't help me.

score 73 · Accepted Answer · answered Apr 08 '17 at 07:19

Perform below steps to make it work:

npm install @angular/animations@latest --save
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)
In your component use imports from the new package like this - " import { trigger, state, style, transition, animate } from '@angular/animations'; "

This worked for me.

weo3dev · Answer 2 · 2017-03-29T02:38:30.997

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!

Thanks, @TobySpeight, I should have thought of that the first time! I put in as much helpful solution as I could think of at the moment. — weo3dev, Mar 29 '17 at 02:40

score 4 · Answer 3 · answered Sep 08 '17 at 09:15

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';

answered Sep 08 '17 at 09:15

Salim Ibrohimi

1,351
3
17
35

score 2 · Answer 4 · answered Mar 17 '17 at 12:26

2

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

answered Mar 17 '17 at 12:26

Michael Kang

52,003
16
103
135

will updating to angular 4 effect my other setting ie. component and modules. or will uninstalling the angular/animation will work? – Lijin Durairaj Mar 17 '17 at 12:28
angular uses semantic versioning. They'll increment the major version (2 to 4) when there is some breaking change. However, it is not a complete re-write like it was from ng1 to ng2. Either remove the animations module or upgrade - both should work fine for you. – Michael Kang Mar 17 '17 at 12:30
i have updated the question with the latest try, please have a look at it, thanks for your help – Lijin Durairaj Mar 17 '17 at 12:35
One of your libraries has a dependency on @angular4. Which one? i'd uninstall that library. – Michael Kang Mar 17 '17 at 12:38

score 1 · Answer 5 · answered Mar 25 '17 at 01:35

1

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';

answered Mar 25 '17 at 01:35

Brendan

868
1
16
38

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

0

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 18 '17 at 01:01

Ninja Coding

1,357
1
16
26

Hi, where is it systemjs.config.js in an angular-cli project? Thanks – Nammen8 Sep 07 '17 at 14:09
for angular-cli i think it doesn't exists. – Ninja Coding Sep 07 '17 at 18:19

Cannot find module angular/animations

6 Answers6

Linked