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.

update 1

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 doesnt help me :(

回答1:

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.

回答2:

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!

回答3:

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

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

回答5:

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

回答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.

来源：https://stackoverflow.com/questions/42857345/cannot-find-module-angular-animations

标签

angular

Webpack

angular-animations