After update to Angular 9 it does not work to use Hammer.js anymore. We have extended the Angular HammerGestureConfig
like the following.:
import {HammerGestureConfig} from '@angular/platform-browser';
import {Injectable} from '@angular/core';
@Injectable({providedIn: 'root'})
export class HammerConfig extends HammerGestureConfig {
overrides = <any>{
'pan': {
direction: Hammer.DIRECTION_ALL,
threshold: 5
} // override default settings
};
buildHammer(element) {
const recognizers = [];
if (element.hasAttribute('data-hammer-pan')) {
recognizers.push([Hammer.Pan]);
}
if (element.hasAttribute('data-hammer-pan-x')) {
recognizers.push([Hammer.Pan, {direction: Hammer.DIRECTION_HORIZONTAL}]);
}
if (element.hasAttribute('data-hammer-tap')) {
recognizers.push([Hammer.Tap]);
}
if (element.hasAttribute('data-hammer-pinch')) {
recognizers.push([Hammer.Pinch]);
}
if (element.hasAttribute('data-hammer-rotate')) {
recognizers.push([Hammer.Rotate]);
}
if (element.hasAttribute('data-hammer-press')) {
recognizers.push([Hammer.Press]);
}
if (element.hasAttribute('data-hammer-swipe')) {
recognizers.push([Hammer.Swipe]);
}
const hammer = new Hammer.Manager(element, {
recognizers: recognizers,
touchAction: 'auto'
});
return hammer;
}
}
The HammerConfig
is added to the app module.:
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: HammerConfig
}
],
As far as I understand the method buildHammer
should be called, but it is never called.
What could be the problem?
The HammerModule
needs to be imported to the Angular app module.
imports: [
...
HammerModule
],
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: HammerConfig
},
...
],
...
ivy: make Hammer support tree-shakable. Previously, in Ivy applications, Hammer providers were included by default. With this commit, apps that want Hammer support must import
HammerModule
in their root module. (#32203) (de8ebbd)