Could not find HammerJS in angular 6

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


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.


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>