Angular - 'Could not find HammerJS'

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 [email protected] --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.

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';

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.

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.

Angular - 'Could not find HammerJS'

Related

Recent Posts