Angular - 'Could not find HammerJS'

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.

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.

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.

1. npm install hammerjs --save

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

3. add this to typescript.config under compiler options

   "types": [ "hammerjs" ]

4. add this to app.components.ts:

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

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

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