Components: Cannot find name 'HammerManager' and Cannot find name 'HammerInput'.

Created on 15 Aug 2016  路  9Comments  路  Source: angular/components

Bug,

I am attempting to using material2, angular-cli and angular-modules. Placing the angular2-material components including the core module into a custom shared-module. Attempting to use the shared-module always results in the following

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19
Cannot find name 'HammerInput'.

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39
Cannot find name 'HammerManager'.

Removing the modules and the cli runs normally otherwise. I have seen many mentions of similar problems by googling and on stack overflow but none of the solutions helped.

I have saved hammerjs and @types/hammerjs to my package.json but this did not help. I tried installing hammerjs globally without resolution of the poblem either.

Hope this issue could be resolved soon.

I am using the latest angular-cli@webpack.

Thanks

Most helpful comment

Try installing @types/hammerjs : npm i --save-dev @types/hammerjs

Then edit tsconfig.json file and add hammerjs to the types section.

"types": [
"jasmine", "hammerjs"
]

All 9 comments

I had this same problem and fixed it an hour ago. Once hammerjs was installed, i had to make a reference to it in main.ts. Right at the top. Add:

/// <reference path="../typings/globals/hammerjs/index.d.ts" />

Be sure it's pointing to the right file in your project. Again, I don't know enough to say why it worked, but it did. Someone smarter can probably figure out why. Hope it helps.

Wouldn't it be better to add the typings/index.d.ts?

/// <reference path="../typings/index.d.ts" />

I'm not sure why the webpack cli isn't adding that by default.

Duplicate of #797

Please have a look at below link, I think this is what you need:

https://github.com/angular/material2/issues/977#issuecomment-238946558

Solved at https://github.com/angular/material2/issues/977#issuecomment-238946558 - third comment by @adrm

@st-clair-clarke I'm not sure why we should considered that a solution rather than a workaround? A third-party library like ng-Material should not be causing compilation errors. Ideally it would include all it needs. What do you think?

Try installing @types/hammerjs : npm i --save-dev @types/hammerjs

Then edit tsconfig.json file and add hammerjs to the types section.

"types": [
"jasmine", "hammerjs"
]

npm i --save-dev @ types/hammerjs solved problem. remove space after @

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings