web-dev-qa-db-fra.com

Impossible de trouver le module angulaire/animations

J'utilise webpack dans angular2 et lorsque j'essaie d'exécuter mon application, un message d'erreur s'affiche. 

Impossible de trouver le 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"
}

mon fichier webpack.config.js est 

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

quand j'exécute la commande comme npm start, j'obtiens une erreur comme mentionné ci-dessus.

mise à jour 1

j'ai même essayé d'installer angular-animate en utilisant cette commande

npm installer angular-animate

c'est le message d'erreur que je reçois  enter image description here J'ai également essayé de désinstaller angular-animate avec la commande

npm désinstaller angular-animate

mais ça ne m'aide pas :(

angularwebpackangular-animations
18
Lijin Durairaj

Effectuez les étapes ci-dessous pour que cela fonctionne:

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

  2. importer "BrowserAnimationsModule" à partir de "@ angular/platform-browser/animations" dans votre racine NgModule (sans cela, votre code sera compilé et exécuté, mais les animations déclencheront une erreur)

  3. Dans votre composant, utilisez les importations du nouveau package, comme ceci: "import {trigger, state, style, transition, animate} from" @ angular/animations ";"

Cela a fonctionné pour moi.

32
Hamit

Vous êtes sur la bonne voie, mais fermez-vous! Vous pouvez voir dans cette discussion ici , que les animations ont été retirées du noyau. De plus, les noms composés sont apparemment supprimés - les animations angulaires sont donc désormais @ angular/animations, tout comme @ angular/angular-cli est devenu @ angular/cli.

Donc, pour (espérons-le) résoudre votre problème, vous devez procéder comme suit:

Mettez à jour Angular 4 dans votre projet. Pour ce faire, vous devez exécuter les opérations suivantes: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest --save et vous devez également mettre à jour TypeScript avec npm install TypeScript@latest --save.

Cela devrait faire l'affaire.

Si cela fonctionne ne le fait pas, je suggérerais de vérifier votre paquet json et de vous assurer de passer à la version 4.0 dans tous les aspects fondamentaux avec le segment d'animations désormais séparé. Ensuite, supprimez le dossier de vos modules de nœud, videz votre cache et lancez une nouvelle installation avec le package de mise à jour, comme suit:

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

C’est un peu agité en ce moment avec beaucoup de personnes différentes qui apportent beaucoup de modifications et de corrections au jeu de fonctionnalités de base, et alors autres parties d’Angular étant rattrapées par le coeur, je vous conseillerais donc transmettez soigneusement chaque projet sur lequel vous êtes, en procédant par étapes très méthodiques, afin de pouvoir résoudre les problèmes un par un (et plus facile à trouver/à résoudre).

J'espère que cela t'aides!

5
metavurt

@ angular/animimations a été introduit dans la version 4.0.0 (release candidate). Vous devrez mettre à jour angular4.

2
pixelbits

Vous devez importer un module d'animation angulaire comme ceci:

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

Comme dans Angular 2, cela faisait partie du noyau, comme le montre la documentation archivée :

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

1
Brendan

J'ai fait cette étape:

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

Je vais citer:

J'ai eu le même problème de passer de 2.0 à 4.0. Finalement, mon fichier systemjs.config.js manquait:

'@ 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',

Au début, j'avais les première et troisième lignes - tout a commencé à fonctionner une fois, j’ai ajouté la deuxième ligne pour @ angular/animations/browser.

cela a fonctionné pour moi et je peux voir réglé la plupart des cas.

0
Ninja Coding