Angular - 'Could not find HammerJS'

Question

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says:

Could not find HammerJS. Certain Angular Material components may not work correctly.

I have hammerjs installed and also @angular/material. How do I resolve this issue?

Sidenote

It may be worth noting that if you have hammerjs installed and your components are still not rendering correctly to make sure you are using angular material components and not html elements with materialize-css classes. If you are using materialize-css instead of angular material, you will need to add it to your project separately.

score 173 · Accepted Answer · edited Mar 19 '19 at 13:39

173

In your package.json file add this to dependencies

"hammerjs": "^2.0.8",

Or if you want an alternative automatic way just you can type npm i hammerjs --save (or npm i hammerjs@2.0.8 --save if you want, since 2.0.8 is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules folder and reinstall it in the root project folder also by running npm install which will check the dependencies (where hammerjs resides), devDependencies ..., in package.json file and install them.

Also in your polyfills.ts (recommended to have a one if you have not)

import 'hammerjs/hammer';

Thus, it would be found while your angular app is executed since polyfills.ts itself is called by import (in a normal case, else you can check it) in main.ts which is the angular apps' entry point.

edited Mar 19 '19 at 13:39

Moshe Slavin

5,127
5
23
38

answered Dec 25 '16 at 16:24

SeleM

9,310
5
32
51

9

adding the import statement to `polyfills.ts` silences the warning, which is great! But the material design components are still not rendering correctly :/ I'll include a screenshot in the question description. Thanks for your help so far! – Danoram Dec 26 '16 at 09:12
about `Material`, do you mean that hover on the **i** ? because i do not see an obvious difference – SeleM Dec 26 '16 at 09:42
I've added that and reinstalled the `node_modules` but no change :/ – Danoram Dec 26 '16 at 12:30
that's ok. Thanks for your help thus far! – Danoram Dec 26 '16 at 14:44
2

no. but I'll be sure to check back once I find a solution. – Danoram Dec 26 '16 at 15:06
2

Seems I forgot to add the css link to my `index.html` file. whoopsie.. All looks fine now. Cheers for the help! – Danoram Jan 02 '17 at 07:31
3

I'm not using any of the components that need `hammer`. Is there a way to disable these warnings? I get like 30 of these in my tests. – CWSpear Mar 16 '17 at 02:43
what kind of warnings ? – SeleM Mar 16 '17 at 08:16
Why doesn't the library depend directly on 'hammerjs' since its going to use it anyway? – Caramiriel Oct 11 '18 at 09:46
@Caramiriel not all material components depends on it in fact, so that is why, it would be useless for someone who use only components that dont require hammerjs. – SeleM Oct 11 '18 at 11:52
1

import 'hammerjs/hammer'; removed warning for me – silentsudo Mar 13 '19 at 06:32
This is a wrong answer. Only works to silence the warning please avoid – Jimmy Kane Nov 09 '19 at 14:31
@JimmyKane, it worked for 147 persons (min), thanks for the downvote :) – SeleM Nov 12 '19 at 12:15
of course it works but its not a polyfill so why put it there? There is a difference from working and the proper solution right? Can you explain why you should put it in polyfills? – Jimmy Kane Nov 12 '19 at 12:51
So hammerjs is a polyfill not a library to provide gestures according to you? In all documentation etc nowhere so far or even on hammerjs repo its mentioned to be polyfill. Adding that import there implies that later on , when a browser implementes this you can remove hammerjs from there (or if you are not targeting that browser) , which will not happen. Browsers wont provide the same hammerjs api and that is why its needed. You can add at polyfill js even your app init but that should not be the case. – Jimmy Kane Nov 12 '19 at 13:20
Even searching for hammerjs + polyfill only leads here :-D – Jimmy Kane Nov 12 '19 at 13:22
Anyways its not a valid answer for angular. According to the specs and the material team it should be in main.ts as polyfill.js might be gone in the next releases. And hammerjs is not a polyfill. Its ok to disagree – Jimmy Kane Nov 12 '19 at 13:23

All Іѕ Vаиітy · Answer 2 · 2019-09-13T09:53:27.737

109

Install hammerjs

with npm
```
npm install --save hammerjs
```
(or) with yarn
```
yarn add hammerjs
```

Then import hammerjs on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

edited Sep 13 '19 at 09:53

answered Jan 31 '17 at 17:37

All Іѕ Vаиітy

24,861
16
87
111

1

ah good answer, I didn't care to think that this is probably what a lot of people who find this question might want to know – Danoram Feb 01 '17 at 03:56
7

This should be the right answer. Additionally, you should add `import 'hammerjs';` in every `*.spect.ts` test file that uses material components in order to fix the warning when running `ng test`. – Cartucho Feb 12 '17 at 23:14
3

I didn't need to change the `tsconfig.json` but the import works, thanks for the answer. – Spurious Aug 15 '17 at 09:02
if you have to add the import to every spec file, shouldn't there be a way to add it to the karma.conf file? – Jeff Sep 05 '17 at 20:17
The [cited source](https://material.angular.io/guide/getting-started) says to `import it on your app's entry point (e.g. src/main.ts)` rather than in app.module.ts. Obviously, it doesn't actually matter anyway though. – Stack Underflow Jan 08 '19 at 22:07

Tamas · Answer 3 · 2016-12-28T14:05:48.953

9

In your systemjs.config.js file you also need to add the following entry:

'hammerjs': 'npm:hammerjs/hammer.js',

along with of course:

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

The other thing that's missing from your code (at least based on what you have in the GH repo) is the inclusion of the Material Design CSS, add this to your index.html file:

<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

I hope this helps.

edited Dec 28 '16 at 14:05

answered Dec 28 '16 at 10:50

Tamas

10,953
13
47
77

Sorry to take so long to get back to you. I don't think my project is using systemjs. although you are right about me forgetting to import the css! thank you so much it's now looking right! – Danoram Jan 02 '17 at 07:30

score 8 · Answer 4 · answered Nov 02 '18 at 15:08

this worked for me (and this is with ionic4 as well) I could make hammer.js work - and also ionic with material.angular.io (in the bottom)

Hammer + ionic (hammer + angular as well):

npm install --save hammerjs
npm install --save @types/hammerjs

then

package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",

then

tsconfig.json - added types as seen below

"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}

then

in app.component.ts (only there)
import 'hammerjs';

then

in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file

Sample code from hammerjs site works

let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
    element2.textContent = ev.type +" gesture detected.";
    console.log(ev.type +" gesture detected.");
});

Hammer+ionic+material: to make material hammer work with ionic

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

and voila, your material slider works.

kind user · Answer 5 · 2017-03-21T13:19:46.513

3

Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root, hit enter and paste:

npm install hammerjs --save

Npm will automatically add all dependencies into your package.json file.

edited Mar 21 '17 at 13:19

answered Dec 25 '16 at 16:31

kind user

40,029
7
67
77

@torazaburo Hammerjs version on npm is being updated frequently so the OP can be sure that if he install hammerjs by using npm command it will be up to date&working. – kind user Dec 29 '16 at 17:12
@torazaburo To be honest I didn't use `--save` while installing it by npm and everything went smooth, but since you are a very experienced user it would be imprudent to argue with you. – kind user Dec 29 '16 at 17:18
I think `--save` is no longer necessary because it will be used automatically. https://docs.npmjs.com/cli/install – Spurious Aug 15 '17 at 09:04
1

If you omit the ```--save``` it will still work, but it will not be added to the package.json file, which means that it will not be automatically installed when running ```npm install``` in the future – Niklas Jun 11 '18 at 07:07

score 3 · Answer 6 · answered Nov 03 '18 at 19:59

3

Install with

npm install --save hammerjs

or

yarn add hammerjs

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

Angular Material Getting Started Guide

answered Nov 03 '18 at 19:59

Courtney Pattison

1,596
2
19
27

score 3 · Answer 7 · answered Apr 28 '19 at 19:49

3

npm install hammerjs --save
npm install @types/hammerjs --save-dev
add this to typescript.config under compiler options

"types": [ "hammerjs" ]
add this to app.components.ts:

answered Apr 28 '19 at 19:49

JWP

6,672
3
50
74

YOU sir, are a savior and if I ever manage to get a second son, he will be named after you! – codingbuddha Aug 20 '20 at 09:19

score 3 · Answer 8 · answered May 31 '21 at 08:51

Starting from Angular 9 you need to add HammerModule to imports array of your AppModule. Please, find the example below:

...

import {
  BrowserModule,
  TransferState,
  BrowserTransferStateModule,
  HammerModule, // <-- Hammer Module
} from '@angular/platform-browser';

...

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpClientModule,
    AppRoutingModule,
    HammerModule, // <-- Hammer Module
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Don't forget to do npm install or yarn add for adding hammerjs to your project. For a more convenient way, it will be better to install @types/hammerjs

Praveen G · Answer 9 · 2021-06-26T06:29:38.557

-1

Other than importing hammerJS separately,we can provide this gesture recognition feature to yes while installing angular material(version 8) library with the following command.

npm add @angular/material

Set up HammerJS for gesture recognition?-Yes

Verify the 'hammerjs' is imported into main.ts file

edited Jun 26 '21 at 06:29

answered Jun 26 '21 at 02:54

Praveen G

161
1
2
8

hammerjs is no longer used by Angular Material. – Lars Rødal Jun 26 '21 at 05:43
specified the version number to avoid confusion – Praveen G Jun 26 '21 at 06:35

score -1 · Answer 10 · answered Jun 23 '23 at 12:33

-1

In your package.json file add this to dependencies

"hammerjs": "^2.0.8",

Or if you want an alternative automatic way just you can type npm i hammerjs --save (or npm i hammerjs@2.0.8 --save if you want, since 2.0.8 is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules folder and reinstall it in the root project folder also by running npm install which will check the dependencies (where hammerjs resides), devDependencies ..., in package.json file and install them.

answered Jun 23 '23 at 12:33

user22120133

1

Please don't copy or re-post the accepted answer. The accepted answer already mentions the primary steps that you've written as part of your answer. – varad_s Jun 25 '23 at 14:39
This is a copied duplicate answer. – varad_s Jun 25 '23 at 14:39

Angular - 'Could not find HammerJS'

Sidenote

10 Answers10

Linked