HammerJS not found

[egalley]

Hello,

With this new release, running my App and the demo :

https://stackblitz.com/edit/image-cropper

I got

[NgxImageCropper] Could not find HammerJS - Pinch Gesture won't work

on the console.

An idea to solve these problems.

Thank you

[bogdanbaghiu]

Hello,

I think appear this error because not execute in the smartphone. Pinch Gesture indicate to smartphone feature.

[Mawi137]

HammerJS is optional so it will show a warning in dev mode. If you wish to use pinch gestures on mobile, you'll need to install HammerJS. If not, you can just ignore the warning.

[egalley]

Thank you Martijn for your feedback and you great job.

I was surprised because it appeared after upgrade from release 1.4.1 and hammerJs is installed but if it's ok for you it'not necessary to search anymore.

[dodomui]

I tried run ngx-image-cropper@3.1.8 with hammerjs@2.0.8. But it still showing hammerjs not found while running on android device.

[Mawi137]

So it doens't show the warning on other devices @dodomui ?

[dodomui]

Tried both Android and iOS now, showing same error and pinch gesture won't work.

Below is the warning from console

vendor-es2015.js:72501 The "pinchmove" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
vendor-es2015.js:72501 The "pinchend" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
vendor-es2015.js:72501 The "pinchstart" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
vendor-es2015.js:213352 [NgxImageCropper] Could not find HammerJS - Pinch Gesture won't work

[Mawi137]

Angular 9? Because I found an article that says you need to import the HammerModule from Angular as well now: https://levelup.gitconnected.com/making-hammerjs-work-with-angular-9-81d289159320

[egalley]

Yes it's Angular 9, but HammerModule is already imported and that does not fix anything in spite of what is said in the link.

[camicase82]

For me the fix was to add "hammerjs": "^2.0.8", into package.json, update packages, and add import 'hammerjs/hammer'; tp my polyfill.ts, in your case add it to the entry point of your app

[egalley]

Thank you Camilo, it works (no more warnings). It's not very intuitive to install a module (hammerjs) which is already a part of angular 9 and to refer it in the app component.

[camicase82]

Glad that I was able to help @egalley also, have you tried this on a real app? I've been doing some testing with different libraries due to performance, and haven't found anything really good, with this one I'm getting a delay on touch events of more than 5 seconds rendering my app useless, have you tested another crop libs?

[egalley]

It's a good library but now that I'm back to the office I can't test it on a touch screen (smartphone or tablet) because there is no wifi.

I'll try at home with the fix and

https://stackblitz.com/edit/image-cropper

[luninroman]

For me the fix was to add "hammerjs": "^2.0.8", into package.json, update packages, and add import 'hammerjs/hammer'; tp my polyfill.ts, in your case add it to the entry point of your app

It works for me as well

Though, I do believe that the warning should be removed from the original source. It overpopulates my unit tests output and I don't see any other way to silence it than to import hammer.js, even if I don't really need it.

[burnaDLX]

For me, the solution was to import the hammerjs module into the *.module file as well:

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