Reputation: 3501

Cannot find module angular/animations

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.

Upvotes: 35

Answers (6)

Salim Ibrohimi

Reputation: 1391

You must import angular animation module like this:

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

Upvotes: 5

Ninja Coding

Reputation: 1404

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.

Upvotes: 0

Hamit

Reputation: 916

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.

Upvotes: 74

weo3dev

Reputation: 319

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!

Upvotes: 6