Clash Royale CLAN TAG#URR8PPP

Angular 2 - 'Could not find HammerJS'

I'm working on a simple angular2 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?

hammerjs

@angular/material

My project can be found at this github repo

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 2 components and not html elements with materialize-css classes.
If you are using materialize-css instead of angular material 2, you will need to add it to your project separately.

hammerjs

angular material 2

materialize-css

materialize-css

angular material 2

4 Answers
4

In your package.json file add this to dependencies

package.json

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 in package.json file and install them.

npm i hammerjs --save

npm i hammerjs@2.0.8 --save

2.0.8

node_modules

npm install

dependencies

package.json

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

polyfills.ts

import 'hammerjs/hammer';

polyfills.ts

index.html

hammer

Install hammerjs via npm

hammerjs

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


In your src/app/app.module.ts import hammerjs,

src/app/app.module.ts

import 'hammerjs';


Then add hammerjs to the types in your tsconfig.json file.

tsconfig.json


"compilerOptions":
"types": [
"hammerjs"
]




source: Get started with Angular Material 2

import 'hammerjs';

*.spect.ts

ng test

tsconfig.json

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

systemjs.config.js

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

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

along with of course:

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

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

index.html

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

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

I hope this helps.

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

cd your-project's-root

npm install hammerjs --save


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

package.json

--save

--save

--save

npm install

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.