Menu
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:
"^2.0.8", to dependencies in package.json file.'hammerjs/hammer'; in polyfills.ts file.In my case everything is fine, still I am getting the same warning in browser console.
902
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>
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
34
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.
18
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
