Components: Slide Toggle Doesn't Seem to be working in Alpha 7 Error: Cannot find name 'HammerInput'

[naveedahmed1]

HI,

I just upgraded to Alpha 7 and after upgrade Slide Toggle seems to be broken.

When I compile my project in Visual Studio 2015 I receive the below errors:

Error       Build:Cannot find name 'HammerInput'.   node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts  67  

Error   TS2304  Cannot find name 'HammerInput'. TypeScript Virtual Projects node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts  67

Apparently it seems that the below line is causing the problem in slide-toggle.d.ts:

_onDrag(event: HammerInput): void;

[devversion]

I guess you didn't install the typings for HammerJS?

https://github.com/angular/material2/blob/master/GETTING_STARTED.md#additional-setup-for-md-slide-toggle-and-md-slider

typings i dt~hammerjs --global --save

[adrm]

Install hammerjs and its typings. With alpha7, angular2 rc5, typescript 2.0 and webpack (through angular-cli) this worked for me:

npm install --save hammerjs @types/hammerjs

And then import 'hammerjs' in your main component.

[jelbourn]

@naveedahmed1 installing the typings for HammerJS should resolve this.

[naveedahmed1]

Thank you everyone installing typings through command:

npm install --save hammerjs @types/hammerjs

and then importing it in main file solved the issue.:

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

[ctkdev]

For those finding this issue that have a similar configuration to mine:
angular-material: 2.0.0-alpha.7-3
angular-cli: 1.0.0-beta.11-webpack.2

Just doing the following:
$ npm install --save hammerjs @types/hammerjs

Was all that was needed. Since my tsconfig.json file contains this line:
"typeRoots": [ "../node_modules/@types" ]

I did not have to make any changes to main.ts

[uncledlm]

In addition to ctkdev's solution I had to add hammerjs to the "types" section in tsconfig.json

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

[Kosmonaft]

I had to use @ctkdev and @uncledlm solutions.
Now everything is working fine :+1:

[devversion]

Seems like you didn't load the HammerJS library

import 'hammerjs'; // Recommended

or

<!-- Not recommended when using Webpack -->
<script src="./node_modules/hammerjs/hammer.js">

[vapits]

@DevVersion you're right (sorry I deleted my message by mistake).

[devversion]

@vapits No worries - glad I could help :)

[medeirosrich]

I had to use I had to use @ctkdev and @uncledlm and @DevVersion solutions =D

I did the import in polyfills.ts (using angular-cli webpack)

[petersgiles]

Using angular-cli@latest (webpack)

I added hammerjs

npm install --save hammerjs @types/hammerjs

then on the last line of src/polyfills.ts I added import 'hammerjs';

[whitewaves]

@ctkdev and @uncledlm solutions worked perfectly

[aviramga]

Hi, doing what suggested above this solve the loading issue but now I get a typescript error:
error TS2300: Duplicate identifier 'TouchAction'

this is just an sample one, I get a lot of those (I assume these are all related to hammerjs) although the app seems to work fine.

Any idea?
Thanks!

[MikeGitIt]

Is all of this documented somewhere other than the issues section? Thank God for the internet + googling...yeesh!

[shaozi]

This should be included in the getting started guide!

[angular-automatic-lock-bot[bot]]

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._}