Angular 2 - 'Could not find HammerJS'
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
no. but I'll be sure to check back once I find a solution.
– Danoram
Dec 26 '16 at 15:06
Seems I forgot to add the css link to my
index.html file. whoopsie.. All looks fine now. Cheers for the help!– Danoram
Jan 2 '17 at 7:31
index.html
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.– CWSpear
Mar 16 '17 at 2:43
hammer
Thanks. This worked on angular 5 too
– Sampgun
Feb 8 at 14:55
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
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
– Danoram
Feb 1 '17 at 3:56
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.– Cartucho
Feb 12 '17 at 23:14
import 'hammerjs';
*.spect.ts
ng test
I didn't need to change the
tsconfig.json but the import works, thanks for the answer.– Spurious
Aug 15 '17 at 9:02
tsconfig.json
correct o mundo.. should be the right answer
– jeff
Aug 26 '17 at 20:48
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?
– Jeff
Sep 5 '17 at 20:17
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.
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!
– Danoram
Jan 2 '17 at 7:30
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
@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.
– kind user
Dec 29 '16 at 17:12
@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.– kind user
Dec 29 '16 at 17:18
--save
I think
--save is no longer necessary because it will be used automatically. docs.npmjs.com/cli/install– Spurious
Aug 15 '17 at 9:04
--save
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– Niklas
Jun 11 at 7:07
--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.
adding the import statement to
polyfills.tssilences 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!– Danoram
Dec 26 '16 at 9:12