App won't recognize swipes using Hammer.JS and HammerGestureConfig in Angular 9

Question

I can't recognize swipes in my Angular app using Hammer.JS. It's setup like this:

"@angular/core": "~9.0.0-next.6",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.2"

app.module.ts is looking like this:

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as hammer from 'hammerjs';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    swipe: { direction: hammer.DIRECTION_HORIZONTAL },
    pinch: { enable: false },
    rotate: { enable: false }
  };
}

@NgModule({
  imports: [
    BrowserModule,
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
})

app.component.ts has this method:

onSwipe() {
  console.log('swipe');
}

And finaly app.component.html looks like this:

<div (swipeleft)="onSwipe()" (swiperight)="onSwipe()">
  <h1>Swipe here</h1>
</div>

However, neither swipeleft or swiperight are triggered ever using an iPad or iPhone both running iOS 13.

Am I missing any crucial configuration? Or do I have another issue with this code?

---

I also tested this Stackblitz "blog-ng-swiping" which is working fine on the touch devices, but it's using Angular 8.

Answer 1

It turns out that Angular 9 has a new HammerModule which is used for everything Hammer.JS related and also for tree shaking during compilation.

So besides the whole configuratonion of Hammer.JS, gestures etc. you need to include this Module in your app as well to make Hammer.JS work with Angular 9:

import { HammerModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    HammerModule
  ]
)}