Hammer is not defined error after upgrading to Angular 9

Hello!

after upgrading to Angular 9 and following the instructions of
https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update_guide.html#additional-manual-changes
I keep getting a “Hammer is not defined” error in the browser console.
(“IgxGridRowComponent.html:73 ERROR ReferenceError: Hammer is not defined at new HammerGesturesManager” to be precise.)

I tried to add the HammerModule in many ways and different locations (app.module and below). Also I tried to switch off switch off Angular 9’s Ivy but had no luck.

In the end I imported it by string in main.ts (import “hammerjs”;) This depecated way of importing still works somehow but for obvious reasons I want to get rid of it.

Ideas anybody?

Hallo André,

Thank you for contacting Infragistics Support!

Due to a breaking change in Angular 9 Hammer providers are no longer implicitly added. The Angular’s new HammerModule only enables HammerJS event bindings which were previously enabled by default in Angular versions 8 and below. IgniteUI for Angular components are using such events and that’s why the HammerModule must be imported. Those events are dependent on the HammerJS script, which isn’t included in the HammerModule and therefore it must be imported as a side-effects only import either in the main.ts or in the scripts array of angular.json. 

I have created a test project using Angular 8 and IgniteUI for Angular 8.2.x which I have updated to Angular 9 and IgniteUI for Angular 9.0.x using:

• ng update @angular/cli
• ng update igniteui-angular
• I made sure that there is a hammerjs string import in the main.ts file.
• Finally I imported the HammerModule in the app.module.ts.

The result is that the updated Angular 9 project works as expected. I believe that you will find the described steps helpful.

Please let me know if you need any further information.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Hello Martin,
thank you for your reply.

[quote user=”12A955BD85D62C8CE8E1C6C2C05CF1FE6D77B099″]I made sure that there is a hammerjs string import in the main.ts file.[/quote]

is what I meant by

[quote user=”8FC5A6795635194411C4A13E339F632C71E6B716″]In the end I imported it by string in main.ts (import "hammerjs";)[/quote]

Isn't this a deprecated way of importing it, looking at
https://github.com/angular/components/blob/master/guides/v9-hammerjs-migration.md
you mentioned in your first answer (that ist vanished now in this forum)?

Hello André,

Thanks for your reply.

Angular Components no longer depend on HammerJS. Therefore, it is stated that this string import is outdated in their guidelines. On the other hand, IgniteUI for Angular components depend on HammerJS and it should be imported as a side effect only import into the main.ts file or into the script array of angular.json.

Please let me know if you need any further information.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Hello Martin,

thank you for your speedy and detailed replies!

Best Regards
André

Hello André,

I’m glad that you find the provided information helpful.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.