DEV Community

Cover image for Solution working Hammer.js after upgrading to angular 9
Jesús Mejías Leiva
Jesús Mejías Leiva

Posted on

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,
    .
    .
    .
  ]

Enter fullscreen mode Exit fullscreen mode

🔸 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
  }],

Enter fullscreen mode Exit fullscreen mode

Thanks for reading me. 😊

Top comments (15)

Collapse
 
adri4no profile image
Adriano Valadares

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

Collapse
 
susomejias profile image
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 😄

Collapse
 
adri4no profile image
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...

Thread Thread
 
manandkumaar profile image
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...

Thread Thread
 
adri4no profile image
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.

Thread Thread
 
manandkumaar profile image
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.

Thread Thread
 
adri4no profile image
Adriano Valadares • Edited

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.

Thread Thread
 
manandkumaar profile image
Anand Kumar

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

Thread Thread
 
adri4no profile image
Adriano Valadares

so... did work's?

Thread Thread
 
manandkumaar profile image
Anand Kumar

Yes, it works. Thanks for the input 👍

Collapse
 
hanzofm profile image
Hanzofm • Edited

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?

Collapse
 
1antares1 profile image
1antares1

A hug, master for such a tip.

I had to move to the HammerModule in Angular 10.

Collapse
 
susomejias profile image
Jesús Mejías Leiva

Thanks!! 🤙😜

Collapse
 
recox profile image
Lucas

Thanks!

Collapse
 
susomejias profile image
Jesús Mejías Leiva

🤗