it-swarm.com.de

Modulwinkel/Animationen können nicht gefunden werden

Ich verwende Webpack in Angle2 und wenn ich versuche, meine App auszuführen, erhalte ich eine Fehlermeldung 

Modul "@ angle/animations" kann nicht gefunden werden

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 eine Fehlermeldung wie oben erwähnt.

update 1

ich habe sogar versucht, mit diesem Befehl ein Winkelanimation zu installieren

npm installiere die winkelanimation

dies ist die Fehlermeldung, die ich bekomme  enter image description here Ich habe auch versucht, die Verwendung von angle-animate mit dem Befehl zu deinstallieren

npm deinstallieren Sie die Option für das Anpassen von Winkeln

aber es hilft mir nicht :(

18
Lijin Durairaj

Führen Sie die folgenden Schritte aus, damit es funktioniert:

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

  2. importiere "BrowserAnimationsModule" aus "@ angle/platform-browser/animations" in dein root-NgModule (Ohne dieses wird der Code kompiliert und ausgeführt, aber Animationen lösen einen Fehler aus.)

  3. Verwenden Sie in Ihrer Komponente Importe aus dem neuen Paket wie folgt: "Import {Auslöser, Status, Stil, Übergang, Animieren} aus '@ angle/animations';"

Das hat bei mir funktioniert.

32
Hamit

Sie sind auf dem richtigen Weg, aber ganz in der Nähe! Sie können in diesem Diskussion hier sehen, dass Animationen aus dem Kern genommen wurden. Darüber hinaus werden scheinbar mit Bindestrichen versehene Namen entfernt - also ist angular Animationen jetzt @ eckige/Animationen, genau wie @ eckige/eckige-cli @ eckige/cli geworden ist.

Um Ihr Problem (hoffentlich) zu beheben, sollten Sie Folgendes tun:

Aktualisieren Sie in Ihrem Projekt auf Angular 4. Dazu müssen Sie Folgendes ausführen: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest --save Und müssen Sie ebenfalls ausführen aktualisiere TypeScript mit npm install [email protected] --save

Das sollte den Trick machen.

Wenn es nicht den Trick macht , würde ich vorschlagen, Ihr json-Paket zu überprüfen und sicherzustellen, dass Sie in allen Kernaspekten zusammen mit dem Jetzt auf 4.0 aufgestiegen sind separates Segment für Animationen. Löschen Sie dann den Ordner mit den Knotenmodulen, leeren Sie den Cache und führen Sie eine Neuinstallation mit dem Update-Paket aus.

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

Momentan ist es ein wenig hektisch, da viele verschiedene Leute eine Menge Änderungen und Korrekturen am Kernfeatureset vorgenommen haben und dann andere Teile von = Angular mit dem Kern beschäftigt zu sein, daher rate ich Ihnen, bei jedem Projekt, an dem Sie arbeiten, vorsichtig voranzuschreiten, und zwar in sehr methodischen Schritten, damit Sie Probleme, die nacheinander auftreten (und einfacher), angehen können zu finden/reparieren).

Hoffe das hilft!

5
metavurt

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

2
pixelbits

Sie müssen das Winkelanimationsmodul folgendermaßen importieren:

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

Sieht aus wie in Angular 2, war dies ein Teil des Kerns, wie in der archivierten Dokumentation gezeigt:

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

1
Brendan

Ich habe diese Schritte gemacht:

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

Ich zitiere:

Ich hatte das gleiche Problem beim Upgrade von 2.0 auf 4.0. Am Ende fehlte mir folgendes aus meinen systemjs.config.js:

'@ angle/animations': 'npm: @ angle/animations/bundles/animations.umd.js',
'@ angle/animations/browser': 'npm: @ angle/animations/bundles/animations-browser.umd.js',
'@ angle/Plattform-Browser/Animationen': "npm: @ angle/platform-browser/bundles/platform-browser-animations.umd.js",

Zuerst hatte ich die erste und dritte Linie - alles begann zu funktionieren Einmal fügte ich die zweite Zeile für @ eckig/Animationen/Browser hinzu.

das hat für mich funktioniert und ich kann die meisten Fälle korrigieren.

0
Ninja Coding