Angular - 'Could not find HammerJS'

Related searches

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says:

Could not find HammerJS. Certain Angular Material components may not work correctly.

I have hammerjs installed and also @angular/material. How do I resolve this issue?

Sidenote

It may be worth noting that if you have hammerjs installed and your components are still not rendering correctly to make sure you are using angular material components and not html elements with materialize-css classes. If you are using materialize-css instead of angular material, you will need to add it to your project separately.

In your package.json file add this to dependencies

"hammerjs": "^2.0.8",

Or if you want an alternative automatic way just you can type npm i hammerjs --save (or npm i hammerjs@2.0.8 --save if you want, since 2.0.8 is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules folder and reinstall it in the root project folder also by running npm install which will check the dependencies (where hammerjs resides), devDependencies ..., in package.json file and install them.

Also in your polyfills.ts (recommended to have a one if you have not)

import 'hammerjs/hammer';

Thus, it would be found while your angular app is executed since polyfills.ts itself is called by import (in a normal case, else you can check it) in main.ts which is the angular apps' entry point.

AngularJS — Superheroic JavaScript MVW Framework, Learning Angular: A Hands-On Guide to Angular 2 and Angular 4 Speed & Performance Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.

Angular (web framework), AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC,� Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. These Angular docs help you learn and use the Angular framework and development platform, from your first application to optimizing complex single-page apps for enterprises.

In your systemjs.config.js file you also need to add the following entry:

'hammerjs': 'npm:hammerjs/hammer.js',

along with of course:

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

The other thing that's missing from your code (at least based on what you have in the GH repo) is the inclusion of the Material Design CSS, add this to your index.html file:

<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

I hope this helps.

Angular definition is - forming an angle : sharp-cornered. How to use angular in a sentence.

this worked for me (and this is with ionic4 as well) I could make hammer.js work - and also ionic with material.angular.io (in the bottom)

Hammer + ionic (hammer + angular as well):

npm install --save hammerjs
npm install --save @types/hammerjs

then

package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",

then

tsconfig.json - added types as seen below

"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}

then

in app.component.ts (only there)
import 'hammerjs';

then

in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file

Sample code from hammerjs site works

let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
    element2.textContent = ev.type +" gesture detected.";
    console.log(ev.type +" gesture detected.");
});

Hammer+ionic+material: to make material hammer work with ionic

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

and voila, your material slider works.

Angular Introduction: What Angular IS AngularJS used to be the “golden child” among JavaScript frameworks, as it was initially introduced by Google corporation in 2012. It was built with the

Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root, hit enter and paste:

npm install hammerjs --save

Npm will automatically add all dependencies into your package.json file.

AngularJS uses double braces { { }} as place holders for data. AngularJS directives are HTML attributes with the prefix ng- The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data.

This Tutorial. This tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible. First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.

Controller Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.

The documentation is organized into modules which contain various components of an AngularJS application. These components are directives, services, filters, providers, templates, global APIs, and testing mocks. There is also a guide with articles on various topics, and a list of external resources.

Comments
  • adding the import statement to polyfills.ts silences the warning, which is great! But the material design components are still not rendering correctly :/ I'll include a screenshot in the question description. Thanks for your help so far!
  • no. but I'll be sure to check back once I find a solution.
  • Seems I forgot to add the css link to my index.html file. whoopsie.. All looks fine now. Cheers for the help!
  • I'm not using any of the components that need hammer. Is there a way to disable these warnings? I get like 30 of these in my tests.
  • import 'hammerjs/hammer'; removed warning for me
  • ah good answer, I didn't care to think that this is probably what a lot of people who find this question might want to know
  • This should be the right answer. Additionally, you should add import 'hammerjs'; in every *.spect.ts test file that uses material components in order to fix the warning when running ng test.
  • I didn't need to change the tsconfig.json but the import works, thanks for the answer.
  • if you have to add the import to every spec file, shouldn't there be a way to add it to the karma.conf file?
  • The cited source says to import it on your app's entry point (e.g. src/main.ts) rather than in app.module.ts. Obviously, it doesn't actually matter anyway though.
  • Sorry to take so long to get back to you. I don't think my project is using systemjs. although you are right about me forgetting to import the css! thank you so much it's now looking right!
  • @torazaburo Hammerjs version on npm is being updated frequently so the OP can be sure that if he install hammerjs by using npm command it will be up to date&working.
  • @torazaburo To be honest I didn't use --save while installing it by npm and everything went smooth, but since you are a very experienced user it would be imprudent to argue with you.
  • I think --save is no longer necessary because it will be used automatically. docs.npmjs.com/cli/install
  • If you omit the --save it will still work, but it will not be added to the package.json file, which means that it will not be automatically installed when running npm install in the future