DEV Community

loading...
Cover image for Solution working Hammer.js after upgrading to angular 9

Solution working Hammer.js after upgrading to angular 9

susomejias profile image Jesús Mejías Leiva ・1 min read

🔸 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. 😊

Discussion

pic
Editor guide
Collapse
valadaresa 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 Author

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

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

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
valadaresa 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

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
Collapse
recox profile image
Lucas

Thanks!

Collapse
susomejias profile image