Angular 2 - 'Could not find HammerJS'

I'm working on a simple angular2 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?

My project can be found at this github repo

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 2 components and not html elements with materialize-css classes. If you are using materialize-css instead of angular material 2, you will need to add it to your project separately.

selem mn

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.

With latest Angular versions,

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

Original Answer (versions below Angular 5)

Install hammerjs via npm

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

In your src/app/app.module.ts import hammerjs,

import 'hammerjs';

Then add hammerjs to the types in your tsconfig.json file.

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

source: Get started with Angular Material 2

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.

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