instalar - No se puede encontrar el módulo angular/animaciones

modulos angular 4

Question

Estoy usando el paquete web en angular2 y cuando intento ejecutar mi aplicación, aparece un error que indica

No se puede encontrar el módulo "@ angular / animations"

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

mi archivo webpack.config.js es

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

cuando ejecuto el comando como npm start, aparece un error como se menciona arriba.

actualización 1

Incluso intenté instalar angular-animate usando este comando

npm instala angular-animate

este es el mensaje de error que recibo También traté de desinstalar angular-animate con el comando

npm uninstall angular-animate

pero no me ayuda :(

Answer 1

@ angular / animimations se introdujo en la versión 4.0.0 (versión candidata). Deberá actualizar a angular4.

Answer 2

Parece que en Angular 2 esto era parte del núcleo, como se muestra en la documentación archivada :

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

Answer 3

Estás en el camino correcto, pero solo cerca! Puedes ver en esta discusión aquí , que las animaciones fueron sacadas del núcleo. Además, aparentemente se están eliminando los nombres con guiones, por lo que las animaciones angulares ahora son @ angular / animations, del mismo modo que @ angular / angular-cli se ha convertido en @ angular / cli.

Por lo tanto, para (afortunadamente) resolver su problema, debe hacer lo siguiente:

Actualiza a Angular 4 en tu proyecto. Tendrá que ejecutar lo siguiente para hacerlo: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest --save y también necesita actualizar npm install typescript@latest --save con npm install typescript@latest --save

Eso debería hacer el truco.

Si no funciona , sugeriría que revises tu paquete json y te asegures de obtener hasta 4.0 en todos los aspectos centrales junto con el segmento de animaciones ahora separado. A continuación, elimine la carpeta de módulos de nodo, borre su caché y ejecute una instalación limpia con el paquete de actualización, de la siguiente manera:

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

Es un poco agitado en este momento con muchas personas diferentes que aportan muchos cambios y correcciones al conjunto de características principales, y luego otras partes de Angular se ven atrapadas con el núcleo, por lo que te aconsejaría avanzar con cuidado con cualquier proyecto que están encendidos, en pasos muy metódicos, para que pueda abordar los problemas que surgen uno por uno (y más fáciles de encontrar / corregir).

¡Espero que esto ayude!

Answer 4

Realice los siguientes pasos para que funcione:

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

2. importe "BrowserAnimationsModule" de "@ angular / platform-browser / animations" en su NgModule raíz (sin esto, su código se compilará y ejecutará, pero las animaciones generarán un error)

3. En su componente, utilice importaciones del nuevo paquete como este: "importar {desencadenar, indicar, estilo, transición, animar} desde ''@ angular / animations'';"

Esto funcionó para mí.

Answer 5

He hecho estos pasos:

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

Citaré:

Tuve el mismo problema actualizando de 2.0 a 4.0. Al final me faltaba lo siguiente de mi 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'',

Al principio tenía la primera y la tercera línea, todo comenzó a funcionar una vez que agregué la segunda línea para @ angular / animations / browser.

esto funcionó para mí y puedo ver arreglado la mayoría de los casos.

Answer 6

Debe importar el módulo de animación angular de esta manera:

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