Angular-「HammerJSが見つかりませんでした」

マテリアルデザインをプロジェクトにインポートしようとしている単純な角度のプロジェクトで作業していますが、一部のコンポーネントが正しく機能せず、コンソールの警告で次のように表示されます。

HammerJSが見つかりませんでした。特定のAngular Materialコンポーネントが正しく機能しない場合があります。

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

サイドノート

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

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

"hammerjs"： "^ 2.0.8"、

または、代替の自動方法がnpm i hammerjs --save必要なnpm i hammerjs@2.0.8 --save場合2.0.8は、ルートプロジェクトフォルダーに入力するか（または、最新バージョンなので、必要に応じて）、テストして、問題が引き続き発生する場合は、node_modulesフォルダーを削除してルートに再インストールしてくださいプロジェクトフォルダーも実行npm installすることにより、ファイル内のdependencies（存在する場所hammerjs）、devDependencies...、をチェックしてpackage.jsonインストールします。

また、おpolyfills.ts持ちでない方（お持ちでない方はお持ちになることをお勧めします ）

import 'hammerjs / hammer';

このように、あなたの角度のアプリがあるため、実行されている間、それが見られるpolyfills.ts自体は、インポートによって呼び出されます（通常の場合には、他にあなたがそれを確認することができます）でmain.ts、角度アプリのエントリポイントです。

hammerjsをインストールする

• NPM

  npm install --save hammerjs

• （または）糸付き

  yarn add hammerjs

次にhammerjs、アプリのエントリポイント（例：src / main.ts）にインポートします。

import 'hammerjs';

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

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

もちろん一緒に：

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

（少なくともGHリポジトリにあるものに基づいて）コードに欠けているもう1つのことは、マテリアルデザインCSSを含めることindex.htmlです。これをファイルに追加します。

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

これがお役に立てば幸いです。

これは私にとってはうまくいきました（そしてこれはionic4でも同様です）hammer.jsを動かせるようにすることができます-そして（下の）material.angular.ioを使ってイオン化することもできます

ハンマー+イオン（ハンマー+アンギュラー）：

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 + ionic + material：マテリアルハンマーをイオンで機能させる

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

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

出来上がり、マテリアルスライダーが機能します。

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

npm install hammerjs --save

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

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

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

   "タイプ"：["hammerjs"]

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

でインストール

npm install --save hammerjs

または

yarn add hammerjs

インストール後、アプリのエントリポイント（例：src / main.ts）にインポートします。

import 'hammerjs';

Angular Material Getting Started Guide