Photo by Markus Spiske on Unsplash

Making HammerJS work with Angular 9

A small article about making hammerjs gestures available (again) in your Angular 9 app

If you are just like me still using ‘hammerjs’ library to have (tap) and (press) events in your Angular (or Ionic / Angular) application and you decided to upgrade to Angular 9, you will soon find that all of your tap, pan, press, and alike events are no longer working. Surprisingly the migration guides are also not covering this explicitly…

But worry not — it is easy to fix.

The reason behind the events no longer working is caused Angular 9’s Ivy needed to make hammerjs jazz tree shakeable, and the support for such events now requires a small change that you need to perform as part of the migration to Angular 9 / Ivy:

…Previously, in Ivy applications, Hammer providers were included by default. With this commit, apps that want Hammer support must import HammerModule in their root module.

So first make sure HammerJS is properly installed in your Angular or Ionic / Angular project (you can read this nice article here for details on how you can do that with Ionic 4+ / Angular).

Then you need to simply include this HammerModule import and add it to your application’s ngModule:

With the module imported — voila — all of your gestures should be back to normal and you can enjoy Angular 9’s awesomeness with all of your gestures supported.

Cheers!