The "swiperight" event cannot be bound because Hammer.JS is not loaded

Question

What is the proper configuration for HammerJS in Angular 10/11?

We shouldn't import from 'hammerjs' anymore, instead, we should import HammerModule from @angular/platform-browser. This doesn't seem to work.

When I try to set up HammerJS like that:

    import { NgModule } from "@angular/core";
    import {
      BrowserModule,
      HammerGestureConfig,
      HammerModule,
      HAMMER_GESTURE_CONFIG
    } from "@angular/platform-browser";
    import { FormsModule } from "@angular/forms";
    
    import { AppComponent } from "./app.component";
    import { HelloComponent } from "./hello.component";
    
    @NgModule({
      imports: [BrowserModule, FormsModule, HammerModule],
      declarations: [AppComponent, HelloComponent],
      providers: [
        {
          provide: HAMMER_GESTURE_CONFIG,
          useClass: HammerGestureConfig
        }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

I get this console message when I try to use swiperight:

The "swiperight" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.

Here is a StackBlitz example

I can't make it work without adding 'hammerjs' import. I thought that importing HammerModule (with default HammerGestureConfig) should be enough to make it work.

Working example here (but with the use of import 'hammerjs').

Answer 1

From the docs:

Note that applications still need to include the HammerJS script itself. This module simply sets up the coordination layer between HammerJS and Angular's EventManager.

So doing import 'hammerjs' is still needed.