web-dev-qa-db-ja.com

モジュールの角度/アニメーションが見つかりません

Angular2でwebpackを使用していますが、アプリを実行しようとするとエラーが表示されます

モジュール「@ 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"
}

私の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 startなどのコマンドを実行すると、上記のエラーが発生します。

update 1

私もこのコマンドを使用して角度のある動物をインストールしようとしました

npmにAngular-Animateをインストールする

これはエラーメッセージです enter image description here また、コマンドでangle-animateをアンインストールしようとしました

npmはangular-animateをアンインストールします

しかし、それは私を助けません:(

angularwebpackangular-animations
22
Lijin Durairaj

以下の手順を実行して、機能させます。

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

  2. ルートNgModuleの「@ angular/platform-b​​rowser/animations」から「BrowserAnimationsModule」をインポートします（これがない場合、コードはコンパイルおよび実行されますが、アニメーションはエラーをトリガーします）

  3. コンポーネントでは、次のように新しいパッケージからのインポートを使用します-"import {trigger、state、style、transition、animate} from '@ angular/animations';"

これは私のために働いた。

42
Hamit

あなたは正しい軌道に乗っていますが、すぐ近くにあります！あなたはこれで見ることができます ここでの議論 、アニメーションがコアから取り出されたこと。さらに、ハイフンでつながれた名前は明らかに廃止されています。したがって、angularアニメーションは@ angular/animationsになりました。@ 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 TypeScript@latest --saveで更新する必要もあります。

これでうまくいくはずです。

それがしないトリックをしない場合、jsonパッケージをチェックし、すべてのコアの側面で4.0に達したことを確認することをお勧めします個別のアニメーションセグメント。次に、ノードモジュールフォルダーを削除し、キャッシュをクリアして、更新パッケージを使用してクリーンインストールを実行します。

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

コア機能セットに多くの変更と修正を提供している多くの異なる人々、および_の他の部分thenで、今は少し多忙ですAngularコアに追いついているので、進行中のプロジェクトを慎重に進めることを非常に系統的な手順で行うことをお勧めします。修正）。

お役に立てれば！

5
metavurt

@ angular/animimationsはバージョン4.0.0（リリース候補）で導入されました。 angular4に更新する必要があります。

2
pixelbits

次のようにangularアニメーションモジュールをインポートする必要があります。

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

Angular 2のように見えます。これは アーカイブされたドキュメント に示されているように、コアの一部でした：

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

1
Brendan

私はこの手順を実行しました：

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

引用します：

2.0から4.0へのアップグレードでも同じ問題が発生しました。結局、私は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-b​​rowser/animations'： 'npm：@ angular/platform-b​​rowser/bundles/platform-b​​rowser-animations.umd.js'、

最初に1行目と3行目がありました。@ angular/animations/browserの2行目を追加すると、すべてが機能し始めました。

これは私のために働いたと私はほとんどの場合を修正したことがわかります。

0
Ninja Coding