kann nicht Modul Winkel/Animationen

Question

Ich verwende webpack in angular2 finden und wenn ich versuche, meine app ich einen Fehler laufen unter Angabe

nicht Modul „@ Winkel/Animationen“

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

meine webpack.config.js Datei ist

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

Wenn ich den Befehl wie Npm Start ausführen, erhalte ich einen Fehler wie oben erwähnt.

Update 1

Ich habe sogar versucht Winkel belebter zu installieren Mit diesem Befehl

npm installieren Winkel animieren

dies ist die Fehlermeldung erhalte ich Ich habe auch versucht, angular-animate mit dem Befehl

zu deinstallieren

npm uninstall Winkel belebte

aber es tut mir helfen :(

Answer 1

unten beschriebenen Schritte durchführen, damit es funktioniert:

1. npm installieren @ Winkel/Animationen @ neueste --save

2. Import "BrowserAnimationsModule" von "@ Winkel/Plattform-Browser/Animationen" in Ihrem root NgModule (Ohne dies wird Ihr Code kompilieren und ausführen, aber Animationen werden einen Fehler auslösen)

3. In Ihrer Komponente verwenden Importe aus dem neuen Paket wie folgt - "import {trigger, state, style, transition, animiere} von '@ eckig/Animationen'; . "

Das ist für mich gearbeitet

Answer 2

@ Winkel/animimations wurde in Version 4.0.0 (Release Candidate) eingeführt. Sie müssen auf eckig4 aktualisieren.

Answer 3

Sieht aus wie in Angular 2 dies ein Teil des Kerns war, wie in den archived documentation gezeigt:

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

Answer 4

Sie auf dem richtigen Weg ist, aber nur in der Nähe! Sie können in diesem discussion here sehen, dass Animationen aus dem Kern herausgenommen wurden. Darüber hinaus werden mit Bindestrich versehene Namen scheinbar entfernt - also sind eckige Animationen jetzt @ eckig/Animationen, genauso wie @ eckig/eckig @ eckig/kli geworden ist.

Also, um (hoffentlich) Ihr Problem beheben - Sie Folgendes tun sollten:

Update Angular 4 in Ihrem Projekt. Sie müssen die folgenden tun, um so laufen: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest --save und Sie auch Typoskript mit npm install typescript@latest --save

aktualisieren müssen, die den Trick tun sollten.

Wenn es nicht tut den Trick, würde ich vorschlagen, überprüfen Sie Ihre JSON-Paket und sicherzustellen, dass Sie bis zu 4.0 in allen Kernaspekten zusammen mit dem jetzt separate Animationen Segment.Dann löschen Sie Ihren Knotenmodule Ordner, löschen Sie den Cache, und führen Sie eine saubere Installation mit dem Update-Paket, etwa so:

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

Es ist ein wenig hektisch ist jetzt mit vielen verschiedenen Menschen eine Menge Veränderungen beitragen und Fixes zu den Kern-Feature-Set, und andere Teile von Angular werden mit dem Kern gefangen, so würde ich empfehlen, vorsichtig mit jedem Projekt, das Sie sind, in sehr methodischen Schritten, so dass Sie Probleme angehen können, die kommen eins nach dem anderen (und einfacher zu finden/zu reparieren).

Hoffe, das hilft!

Answer 5

Ich habe diesen Schritt:

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

Ich werde Zitat:

Ich hatte das gleiche Problem eines Upgrade von 2.0 bis 4.0 Am Ende fehlte mir folgendes aus meiner systemjs.config.js:

'@ Winkel/Animationen': 'NPM: @ Winkel/Animationen/Bündel/animations.umd.js',
"@ Winkel/Animationen/Browsers: ‚NPM: @ Winkel/Animationen/Bündel/Animationen-browser.umd.js',
'@ Winkel/Plattform-Browser/Animationen': 'NPM: @ Winkel/Plattform-Browser/Bündel/Plattform-Browser-animations.umd.js',

Zuerst hatte ich die erste und dritte Zeile - alles begann zu arbeiten , sobald ich die zweite Zeile für @ angular/Animationen/Browser hinzugefügt.

dies funktionierte für mich und ich kann die meisten Fälle behoben sehen.

Answer 6

Sie müssen Winkel Animation importieren Modul wie folgt aus:

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