Could not find HammerJS in angular 6

Question

I use angular-material in my project. I am getting this warnings:

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

The "longpress" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.

I know this is a duplicate of this question

In the answer they have mentioned that:

We have to add "^2.0.8", to dependencies in package.json file.
import 'hammerjs/hammer'; in polyfills.ts file.

In my case everything is fine, still I am getting the same warning in browser console.

Actually i tried to give stackblitz link. When i tried with stackblitz it's not showing this warnings. — PGH, Oct 01 '18 at 05:46
I have lot components, i am unable to find for which component it is showing this warning. — PGH, Oct 01 '18 at 05:48
Add `hammerjs` from `node_modules` to `angular.json` and then restart the project — Sina Lotfi, Apr 20 '19 at 12:04

score 95 · Accepted Answer · answered Oct 01 '18 at 06:23

95

There are 2 ways to solve this problem:

Either include the (main) import in your main module's file or polyfills.ts:
```
import 'hammerjs';
```

Or include the script from a CDN into your index.html file:

<head>
  <!-- ... -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <!-- ... -->
</head>

answered Oct 01 '18 at 06:23

Edric

24,639
13
81
91

`import 'hammerjs';` has solved my error thanks a lot for that, Actually previously i have imported **(hammerjs)** in main modules file like `import {} from 'hammerjs';`. Is this wrong?? – PGH Oct 03 '18 at 08:43
1

@PrashanthGH Nope. Just import the module itself. That syntax won't import anything for use with the project. However, importing the module (probably) imports all modules. – Edric Oct 03 '18 at 10:19

score 28 · Answer 2 · answered Jun 17 '19 at 18:25

28

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 Jun 17 '19 at 18:25

NicuVlad

2,491
3
28
47

score 18 · Answer 3 · edited Jun 14 '19 at 16:28

with angular6, you can include hammerjs path in node_modules in angular.json file.

Angular doc says that the purpose of angular.json file is

CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor. For details, see Angular Workspace Configuration.

You can include hammerjs node module path in the script list. see below for an example:

 "projects": {
    "demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
            ]
          },
          "configurations": {
          ....

Note that you have to restart ng serve for it to take effect.

This worked, note it's necessary to stop and restart the project for this file to be picked up. — levelonehuman, May 09 '19 at 14:41

score 0 · Answer 4 · answered Oct 03 '20 at 12:55

0

Project global level addition of hammer js

"scripts": [
              "node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
            ]

Module level Addition

import * as Hammer from 'hammerjs';

answered Oct 03 '20 at 12:55

sunilbaba

441
2
9

Diego Guzmán · Answer 5 · 2022-07-05T16:12:50.763

0

For newer versions of Angular Material, when you install Material you just need to run

ng add @angular/material

It will ask you something like this

Set up HammerJS for gesture recognition?

You should answer "Y" and it will automatically configure HammerJS for you.

Angular Material Installation Guide: https://material.angular.io/guide/getting-started#install-angular-material

edited Jul 05 '22 at 16:12

answered Dec 09 '20 at 16:17

Diego Guzmán

21
2

Could not find HammerJS in angular 6

5 Answers5