Solution working Hammer.js after upgrading to angular 9

🔸 Why did Hammerjs stop working after upgrading to angular 9?

In Angular 9 it was decided that the implementation of Hammerjs was optional, so now we have to import the HammerModule from @angular/platform-browser.

🔸 Solution

Add the HammerModule import from @angular/platform-browser and add it to our @NgModule imports in the app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HammerModule,
    .
    .
    .
  ]

🔸 Solution with HammerGestureConfig

import { BrowserModule, HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';

// custom configuration Hammerjs
@Injectable()
export class HammerConfig extends HammerGestureConfig {
  overrides = <any> {
      // I will only use the swap gesture so 
      // I will deactivate the others to avoid overlaps
      'pinch': { enable: false },
      'rotate': { enable: false }
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HammerModule,
    .
    .
    .
  ],
  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy},{
    provide: HAMMER_GESTURE_CONFIG,
    useClass: HammerConfig
  }],

Thanks for reading me. 😊

Comments

[Hanzofm]

Hi, I have updated all my angular libraries to 10.1.4 and now (pan) directive not fires events. I already have on main.ts the 'import 'hammerjs'; and on app.module I have the Hammermodule import.
Is necessary to do something more?

[1antares1]

A hug, master for such a tip.

I had to move to the HammerModule in Angular 10.

[Jesús Mejías Leiva]

Thanks!! 🤙😜

[Adriano Valadares]

i can not swipe up and down :sadface
You have a work around for this?

[Jesús Mejías Leiva]

I have not tried it, but it should work, check that you have done the steps correctly, thanks for your comment 😄

[Adriano Valadares]

i have to thanks you, your explanation did the hammerjs work.
As i said in the first comment, in other forums they say to override the hammerjs configuration like this:
export class HammerConfig extends HammerGestureConfig {
overrides = {
swipe: { enable: true, direction: Hammer.DIRECTION_ALL },
};
}

But is not working for me...

[Anand Kumar]

Adriano - I am also facing this issue now.
There is no clear document for swipe-direction configuration.
did you find any workaround for this?.

Found that setting the below declare statement could solve the issue. Please refer this link for more info.

declare var Hammer: any;

stackoverflow.com/questions/603801...

[Adriano Valadares]

Hi! Anand, how's going?
Yes, for a workaround i just use swipe for left and right directions and use pan action for up and down directions to simulate swipe, like this:

export class HammerConfig extends HammerGestureConfig {
overrides = {
swipe: { enable: true, direction: Hammer.DIRECTION_HORIZONTAL },
pan: { enable: true, direction: Hammer.DIRECTION_VERTICAL },
pinch: { enable: false },
rotate: { enable: false },
};
}

I do not know if there's a colateral effect but work's fine for me.

[Anand Kumar]

Hi Jesus, Adriano,

Do we still need hammer.js for the modules have custom gesture config ?. After removing the imports of hammer.js, swipe event is not working. I am not sure what i am missing.

I am seeing this warning in chrome console -
The "swipe" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.

Steps i have done :-

1. uninstalled hammer.js from package.json
2. Remove all the hammer.js imports manually
3. imported HammerModule in app module
4. Provided custom config in one of the lazy loaded module.
5. Swipe not working

Any help is appreciated?.

P.S - I have removed hammer.js from the dependency and all the imports.

[Adriano Valadares]

Hi Anand,

Did you import hammer.js in main.ts in your project? like this:

import "hammerjs";

You have to provide the custom config on the app.module of your project for your whole project be able to see it.

[Anand Kumar]

Thank you Adriano.
I only removed it as i thought which is optional and not required anymore :D.

[Adriano Valadares]

so... did work's?

[Anand Kumar]

Yes, it works. Thanks for the input 👍

[Lucas]

Thanks!

[Jesús Mejías Leiva]

🤗