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:
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>