Не удается найти модуль angular/анимация

Я использую webpack в angular2, и когда я пытаюсь запустить мое приложение, я получаю сообщение об ошибке

Невозможно найти модуль "@ angular/анимации"

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"
}

Мой файл webpack.config.js

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'
    })
    ]
};

когда я запускаю команду как запуск npm, я получаю ошибку, как упоминалось выше.

обновление 1

Я даже попытался установить angular -animate с помощью этой команды

npm install angular -animate

это сообщение об ошибке, которое я получаю Я также попытался удалить angular -анимать с помощью команды

npm uninstall angular -animate

но он мне не помогает: (

Ответ 1

Выполните следующие шаги, чтобы заставить его работать:

npm install @ angular/animations @latest --save
импортировать "BrowserAnimationsModule" из "@ angular/platform-browser/animations" в корневой NgModule (без этого ваш код будет скомпилирован и запущен, но анимация вызовет ошибку)
В вашем компоненте используйте импорт из нового пакета, например: import {trigger, state, style, transition, animate} из '@ angular/animations'; "

Это сработало для меня.

Ответ 2

Вы на правильном пути, но только близко! Вы можете увидеть в этом обсуждение здесь, что анимации были выведены из ядра. Кроме того, переносимые имена, по-видимому, устраняются - поэтому анимация angular теперь @angular/анимации, так же, как @angular/angular-cli стал @angular/cli.

Итак, чтобы (надеюсь) решить вашу проблему - вы должны сделать следующее:

Обновить в angular 4 в вашем проекте. Для этого вам нужно выполнить следующие действия: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest --save, и вам также необходимо обновить Typescript с помощью npm install [email protected] --save

Это должно сделать трюк.

Если это не делает трюк, я бы предложил проверить ваш пакет json и убедиться, что вы столкнулись с 4.0 во всех основных аспектах наряду с теперь отдельным сегментом анимации. Затем удалите папку node модулей, очистите кэш и запустите чистую установку с пакетом обновления, например:

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

Сейчас это немного волновательно, когда множество разных людей вносят множество изменений и исправлений в набор основных функций, а затем другие части angular увязаны с ядром, поэтому я бы посоветовал двигаться вперед тщательно с любым проектом, на котором вы находитесь, на очень методических шагах, чтобы вы могли решать проблемы, возникающие один за другим (и проще найти/исправить).

Надеюсь, это поможет!

Ответ 3

@angular/animimations был представлен в версии 4.0.0 (кандидат на выпуск). Вам нужно будет обновить до углового4.

Ответ 4

Похоже, что в Angular 2 это было частью ядра, как показано в архивированной документации:

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

Ответ 5

Вы должны импортировать модуль анимации angular следующим образом:

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

Ответ 6

Я сделал следующие шаги:

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

Я приведу:

У меня была такая же проблема с версией от 2.0 до 4.0. В конце я отсутствовал из моего systemjs.config.js:

@angular/анимация ": 'NPM: @ angular/animations/bundles/animations.umd.js',
@angular/анимация/браузера: 'NPM: @angular/animations/bundles/animations-browser.umd.js',
@angular/платформа браузер/анимация": 'NPM: @angular/platform-browser/bundles/platform-browser-animations.umd.js',

Сначала у меня была первая и третья строка - все начало работать после добавления второй строки для @ angular/анимации/браузера.

это сработало для меня, и я вижу фиксированное большинство случаев.