【JavaScript・Angular・Material Design】Angularで発生する「Could not find HammerJS」エラーの原因と解決策を徹底解説！
Angular で発生する「Could not find HammerJS」エラーとその解決策
Angular アプリケーションでジェスチャー認識機能を使用する場合、HammerJS というライブラリが必要となります。しかし、HammerJS がインストールされていない場合や、適切に設定されていない場合、以下のエラーが発生することがあります。
Error: Can't resolve 'hammerjs'
原因
このエラーは、以下のいずれかの原因によって発生します。
- Angular 9 以降の場合、HammerJS がデフォルトで無効化されている
- HammerJS が適切に設定されていない
解決策
以下の方法で解決できます。
HammerJS をインストールする
npm install hammerjs --save
HammerJS を polyfills.ts ファイルにインポートする
import 'hammerjs/hammer';
Angular 9 以降の場合、HammerModule を AppModule にインポートする
import { HammerModule } from '@angular/platform-browser';
@NgModule({
imports: [
HammerModule
],
// ...
})
export class AppModule {}
HammerGestureConfig を提供する (オプション)
HammerJS のデフォルト設定を変更したい場合は、HammerGestureConfig を提供することができます。
import { HammerGestureConfig } from '@angular/platform-browser';
export class MyHammerGestureConfig extends HammerGestureConfig {
overrides = {
swipe: {
direction: Hammer.DIRECTION_ALL
}
};
}
@NgModule({
imports: [
HammerModule.forRoot(new MyHammerGestureConfig())
],
// ...
})
export class AppModule {}
HammerJS をアンインストールする (Angular 9 以降のみ)
HammerJS を必要としない場合は、アンインストールすることができます。
npm uninstall hammerjs --save
- Angular 9 以降では、HammerJS はデフォルトで無効化されています。HammerJS を使用する場合は、上記の手順で明示的にインポートする必要があります。
<div (swipeleft)="onSwipeLeft($event)">
スワイプ左
</div>
<div (swiperight)="onSwipeRight($event)">
スワイプ右
</div>
import { Component } from '@angular/core';
import { HammerGestureConfig } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent extends HammerGestureConfig {
overrides = {
swipe: {
direction: Hammer.DIRECTION_ALL
}
};
onSwipeLeft(event: HammerGestureEvent) {
console.log('スワイプ左:', event);
}
onSwipeRight(event: HammerGestureEvent) {
console.log('スワイプ右:', event);
}
}
polyfills.ts
import 'hammerjs/hammer';
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HammerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
このコードの説明
app.module.tsモジュールクラスには、HammerModule をインポートするコードがあります。polyfills.tsファイルには、HammerJS ライブラリをインポートするコードがあります。app.component.tsコンポーネントクラスには、onSwipeLeftとonSwipeRightという 2 つのメソッドがあります。これらのメソッドは、それぞれスワイプ左とスワイプ右が発生したときに呼び出されます。app.component.htmlテンプレートには、スワイプジェスチャーを検出する 2 つの div 要素があります。
このコードを実行すると、以下のようになります。
- 画面上の div 要素を右にスワイプすると、
onSwipeRightメソッドが呼び出されます。
Angular で HammerJS の代わりに使用できる代替方法
PointerEvent API
PointerEvent API は、Web ブラウザのネイティブ API であり、マウス、タッチ、ペンなどのポインティングデバイスによるジェスチャーを検出できます。HammerJS よりも軽量で、パフォーマンスが優れているという利点があります。
利点
- 多くのブラウザで広くサポートされている
- ネイティブ API なので、追加のライブラリをインストールする必要がない
- 軽量でパフォーマンスが良い
欠点
- 一部のブラウザでは、実装が異なる場合がある
- HammerJS ほど多くのジェスチャーをサポートしていない
GestureLib
GestureLib は、HammerJS に代わるオープンソースのライブラリです。HammerJS と互換性があり、多くのジェスチャーをサポートしています。また、PointerEvent API を使用してジェスチャーを検出するので、パフォーマンスが優れています。
- PointerEvent API を使用してジェスチャーを検出するので、パフォーマンスが良い
- 多くのジェスチャーをサポートしている
- HammerJS と互換性がある
- 一部のブラウザでは、完全にサポートされていない場合がある
- HammerJS よりも新しいライブラリなので、コミュニティが小さい
TouchEvent API
TouchEvent API は、タッチデバイスによるジェスチャーを検出するための Web ブラウザ API です。PointerEvent API よりも基本的な API ですが、多くのタッチデバイスで広くサポートされています。
- 多くのタッチデバイスで広くサポートされている
- マウスイベントとの互換性が低い
- PointerEvent API や GestureLib ほど多くのジェスチャーをサポートしていない
NgGestures
NgGestures は、Angular に特化したジェスチャー認識ライブラリです。Angular のコンポーネントモデルと統合されており、ジェスチャーイベントを簡単に処理することができます。
- ジェスチャーイベントを簡単に処理できる
- Angular に特化しているため、Angular のコンポーネントモデルと簡単に統合できる
- HammerJS や GestureLib ほど成熟したライブラリではない
どの代替手段を選択するべきか
どの代替手段を選択するかは、プロジェクトのニーズによって異なります。以下の点を考慮する必要があります。
- コミュニティ
問題が発生した場合に役立つコミュニティがあるライブラリを選択する必要があります。 - パフォーマンス
パフォーマンスが重要な場合は、PointerEvent API または GestureLib を検討する必要があります。 - ブラウザサポート
ターゲットとするブラウザでライブラリが完全にサポートされていることを確認する必要があります。 - 必要なジェスチャー
プロジェクトで必要なジェスチャーをサポートしているライブラリを選択する必要があります。
HammerJS は、Angular でジェスチャー認識を処理するための優れた選択肢ですが、他の代替手段も存在します。プロジェクトのニーズに合ったものを選択することが重要です。
javascript angular material-design
