Cannot find name 'HammerManager'

Question

I am using @angular-2.0.0-rc.5, @angular2-material 2.0.0-alpha.7-4 & Angular-CLI 1.0.0-beta.11-webpack.2

When I try to compile it throws an error, Cannot find name 'HammerManager'. Please see attached screenshot.

I found some solution for Angular-CLI (non-webpack) version but none for webpack version with.

Any one got this fixed with above setup ?

Donaugh

Answer 1

Here is the solution that worked for me ...

1. npm install hammerjs --save-dev

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

3. import 'hammerjs'; (in main.ts)

Thanks to @j2L4e & this answer https://github.com/justindujardin/ng2-material/issues/244#issuecomment-241600752

Donaugh

i was facing similar issue so I followed your 3 steps but on browser console I am getting error Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3002/hammerjs Do I need to add anything in systemjs.config.js or index.html? – Feathercut

Answer 2

You'll need to install the missing typings:

npm install @types/hammerjs --save-dev

Then put a reference to the hammerjs typings into your tsconfig.json:

"types": [
  ...,
  "hammerjs"
]

if that's not enough, also install hammerjs itself via npm:

npm i hammerjs

Unhallowed

its not working ... still same problem ... I did npm install hammerjs --save-dev & added reference in tsconfig.json as @Unhallowed mentioned – Donaugh

npm install @types/jammerjs --save-dev – Unhallowed

typo. its @types/hammerjs obviously. – Unhallowed

did you npm install hammerjs too? – Unhallowed

whats your projects typescript version? run node_modules/.bin/tsc -v – Unhallowed

yes I did. only part extra i did as mentioned in my answer import 'hammerjs'; in main.ts – Donaugh

I see you got it working. No idea why you'd need to import 'hammerjs', but glad it works. Have a great day! – Unhallowed

Answer 3

While you should use --save-dev when installing the typings, you should use --save when installing hammerjs itself. You will want that installed in production.

Letter

Depends on what you are doing. If you are creating a library that can optionally make use of hammerjs (eg. optional inclusion of gesture support), then you want to develop the library with hammerjs by installing hammer via devDependencies and also declare it in optionalDependencies in order to give a hint to the library's consumers. – Grandee