CODEWITHSUNDEEP
angularangular-materialhammer.js
PGH
PGH

Reputation: 2204

Could not find HammerJS in angular 6

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:

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

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

Upvotes: 62

Views: 56395

Answers (5)

Diego Guzmán
Diego Guzmán

Reputation: 41

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

Upvotes: 0

sunilbaba
sunilbaba

Reputation: 445

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

Upvotes: 0

NicuVlad
NicuVlad

Reputation: 2601

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

Upvotes: 28

Jun
Jun

Reputation: 3044

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.

Upvotes: 18

Edric
Edric

Reputation: 26801

There are 2 ways to solve this problem:

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

    import 'hammerjs';

  2. 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>

Upvotes: 95

Related Questions