Angular-cli: How to reference angular2-material (alpha7) with 1.0.0-beta.11-Webpack.2

[kjartanvalur]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   1.0.0-beta.11-webpack.2
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   
   
   
   1. Added packages @angular2-material/core and @angular2-material/slider version 2.0.0-alpha.7
   
   
   2. In app.module.ts
      
      import { MdCoreModule } from '@angular2-material/core';
      
      import { MdSliderModule } from '@angular2-material/slider';
      
      imports: [
      
      ...
      
      MdCoreModule,
      
      MdSliderModule
      
      ],
   
   
4. The log given by the failure. Normally this include a stack trace and some
   more information.
   ERROR in [default] C:[e-mail]:4:39
   Cannot find name 'HammerManager'.

ERROR in [default] C:[email protected]:50:19
Cannot find name 'HammerInput'.

ERROR in [default] C:[email protected]:52:24
Cannot find name 'HammerInput'.

1. Mention any other details that might be useful.
   I´m just trying to use the slider component from angular2-material framework

---

Thanks! We'll be in touch soon.

[JSMike]

I ran into the same issue, and found the solution
see: https://github.com/angular/material2/issues/1049

typings install --global dt~hammerjs

and add the following to your src/main.ts

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

I assumed the typings/index.d.ts would get included by default, maybe there's an issue on windows with this?

[JSMike]

I'm also having an issue with material icons not appearing, i'm not sure if this is a windows/webpack issue or a material2 issue.

1. OS: Windows 10
2. version:
   angular-cli: 1.0.0-beta.11-webpack.2
   node: 6.3.1
   os: win32 x64
   material2: 2.0.0-alpha.7-2
3. createnew cli project with beta.11-webpack.2
   npm install latest material2 components
   Add MdIconModule to app.module imports
   Add <md-icon>menu</md-icon> to template
4. 
   You'll see the word "menu" appear instead of the icon.

[kjartanvalur]

@JSMike How do you reference HammerJs?

[JSMike]

@kjartanvalur you add the code snippet above to your src/main.ts

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

[kjartanvalur]

Yes that code snippet got me through the HammerInput error but now I have this one:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:4:37
ORIGINAL EXCEPTION: Hammer.js is not loaded, can not bind slide event

[kjartanvalur]

ok, just needed this in polyfills.js. Now it works :)
import 'hammerjs/hammer';

[kjartanvalur]

thanks for the help @JSMike

[uncledlm]

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"
]

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