Return to 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.

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').

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 like that:

import * as Hammer from 'hammerjs';
import { HammerGestureConfig } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any> {
    pan: { direction: Hammer.DIRECTION_ALL },
    swipe: { direction: Hammer.DIRECTION_VERTICAL },
};
...
{
    provide: HAMMER_GESTURE_CONFIG,
    useClass: MyHammerConfig
}

I thought that importing HammerModule (with default HammerGestureConfig) should be enough to make it work.

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.

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

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 like that:

import * as Hammer from 'hammerjs';
import { HammerGestureConfig } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any> {
    pan: { direction: Hammer.DIRECTION_ALL },
    swipe: { direction: Hammer.DIRECTION_VERTICAL },
};
...
{
    provide: HAMMER_GESTURE_CONFIG,
    useClass: MyHammerConfig
}

I thought that importing HammerModule (with default HammerGestureConfig) should be enough to make it work.