Could not find HammerJS in angular 6

Angular Problem Overview

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.

Angular Solutions

Solution 1 - Angular

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>

Solution 2 - Angular

Install with

npm install --save hammerjs

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

Solution 3 - Angular

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

[Angular doc][1] 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.
[1]: https://angular.io/guide/file-structure#workspace-files

Solution 4 - Angular

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

Solution 5 - Angular

For new 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

Content Type	Original Author	Original Content on Stackoverflow
Question	PGH	View Question on Stackoverflow
Solution 1 - Angular	Edric	View Answer on Stackoverflow
Solution 2 - Angular	NicuVlad	View Answer on Stackoverflow
Solution 3 - Angular	Jun711	View Answer on Stackoverflow
Solution 4 - Angular	sunilbaba	View Answer on Stackoverflow
Solution 5 - Angular	Diego Guzmán	View Answer on Stackoverflow