web-dev-qa-db-ja.com

Angular 2 - 'HammerJSが見つかりませんでした'

私は自分のプロジェクトにMaterial Designをインポートしようとしているシンプルなangular2プロジェクトに取り組んでいますが、一部のコンポーネントが正しく機能しておらず、コンソール警告に次のように表示されます。

HammerJSが見つかりませんでした。特定のAngular材料構成要素が正しく機能しない場合があります

私はhammerjsと@angular/materialをインストールしました。どうすればこの問題を解決できますか？

私のプロジェクトはこれで見つけることができます github repo



サイドノート

hammerjsがインストールされていて、コンポーネントがまだangular material 2コンポーネントを使用し、html要素を使用していないことを確認するためにまだ正しくレンダリングされていない場合materialize-cssクラス。あなたが materialize-css の代わりに angular material 2 を使ってしている場合は、 別にプロジェクトに追加する必要があります）。

javascriptangularmaterial-designhammer.js
79
Danoram

package.jsonファイルで、これをdependenciesに追加します

「hammerjs」：「^ 2.0.8」、

または、別の自動方法が必要な場合は、npm i hammerjs --save（または、npm i [email protected] --saveが現在の最新バージョンであるため、必要に応じて2.0.8）を入力するだけですルートプロジェクトフォルダー内node_modulesフォルダーを削除し、ルートプロジェクトフォルダーもに再インストールするには、dependencies（where hammerjsが存在するをチェックするnpm installを実行します。 ））、devDependencies ...、package.jsonファイルでインストールします。

polyfills.tsにも（まだ持っていない場合は持っていることをお勧めします）

import 'hammerjs/hammer';

したがって、polyfills.ts自体がインポートによって呼び出されるため、angularアプリの実行中に検出されます（通常の場合、それ以外の場合は確認できます）angularアプリのエントリポイントであるmain.ts内。

141
selem mn

最新のAngularバージョンでは、

Hammerjsをインストール

  • withnpm

    npm install --save hammerjs

  • （または）糸付き糸

    yarn add hammerjs

それからhammerjsをあなたのアプリのエントリポイント（例えばsrc/main.ts）にインポートしてください。

import 'hammerjs';



オリジナルの回答（Angular 5より下のバージョン）

Npmを介してhammerjsをインストールする

npm install --save hammerjs 
npm install --save-dev @types/hammerjs

あなたのsrc/app/app.module.tsインポートの中で、

import 'hammerjs';

次に、tsconfig.jsonファイルの型にhammerjsを追加します。

{
  "compilerOptions": {
    "types": [
      "hammerjs"
    ]
  }
}

ソース： Angular素材2から始めよう

88
All Іѕ Vаиітy

systemjs.config.jsファイルに次のエントリも追加する必要があります。

'hammerjs': 'npm:hammerjs/hammer.js',

もちろんと一緒に：

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

（少なくともGHリポジトリにあるものに基づいて）あなたのコードから欠けている他のものはMaterial Design CSSのインクルードです。これをあなたのindex.htmlファイルに追加してください：

<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/Indigo-pink.css" rel="stylesheet">

これが役に立つことを願っています。

9
Tamas

これは私にはうまくいきました（そしてこれはion4にもあります）私はhammer.jsを働かせることができます - そしてまたmaterial.angular.io（一番下にある）と一緒にionもできます

ハンマー+イオン（ハンマー+角度付き）：

npm install --save hammerjs
npm install --save @types/hammerjs

それから

package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",

それから

tsconfig.json - added types as seen below

"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}

それから

in app.component.ts (only there)
import 'hammerjs';

それから

in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file

Hammerjsサイト作品のサンプルコード

let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
    element2.textContent = ev.type +" gesture detected.";
    console.log(ev.type +" gesture detected.");
});

Hammer + ion + material：材料ハンマーにイオンを作用させる

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

やあ、あなたの材料のスライダーが動作します。

3
Emilio Maciel
  1. npm install hammerjs --save
  2. npm install @ types/hammerjs --save-dev

  3. これをコンパイラオプションの下でTypeScript.configに追加します。

    "タイプ"：["hammerjs"]

  4. これをapp.components.tsに追加します。

hammerjs

2
John Peters

コマンドラインまたはPowerShellを開き、Angular 2プロジェクトのディレクトリを入力します（cd your-project's-root）。Enterキーを押して貼り付けます。

npm install hammerjs --save

Npmはあなたのpackage.jsonファイルにすべての依存関係を自動的に追加します。

2
kind user

と一緒にインストール

npm install --save hammerjs

または

yarn add hammerjs

インストールしたら、アプリのエントリポイント（src/main.tsなど）にインポートします。

import 'hammerjs';

Angular Material入門ガイド

1
Courtney Pattison