私は自分のプロジェクトにMaterial Designをインポートしようとしているシンプルなangular2プロジェクトに取り組んでいますが、一部のコンポーネントが正しく機能しておらず、コンソール警告に次のように表示されます。
HammerJSが見つかりませんでした。特定のAngular材料構成要素が正しく機能しない場合があります
私はhammerjs
と@angular/material
をインストールしました。どうすればこの問題を解決できますか?
私のプロジェクトはこれで見つけることができます github repo
hammerjs
がインストールされていて、コンポーネントがまだangular material 2
コンポーネントを使用し、html要素を使用していないことを確認するためにまだ正しくレンダリングされていない場合materialize-css
クラス。あなたが materialize-css
の代わりに angular material 2
を使ってしている場合は、 別にプロジェクトに追加する必要があります)。
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
内。
Hammerjsをインストール
withnpm
npm install --save hammerjs
(または)糸付き糸
yarn add hammerjs
それからhammerjs
をあなたのアプリのエントリポイント(例えばsrc/main.ts)にインポートしてください。
import 'hammerjs';
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から始めよう
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">
これが役に立つことを願っています。
これは私にはうまくいきました(そしてこれは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 },
]
やあ、あなたの材料のスライダーが動作します。
コマンドラインまたはPowerShellを開き、Angular 2プロジェクトのディレクトリを入力します(cd your-project's-root
)。Enterキーを押して貼り付けます。
npm install hammerjs --save
Npmはあなたのpackage.json
ファイルにすべての依存関係を自動的に追加します。
と一緒にインストール
npm install --save hammerjs
または
yarn add hammerjs
インストールしたら、アプリのエントリポイント(src/main.tsなど)にインポートします。
import 'hammerjs';