HammerJS error

[Saquib]

I get the error below when trying to use a Kendo Chart in a Angular application.

I have installed hammerjs via npm and also loaded the library by using

import "hammerjs";

in my component typescript file.

Not sure what I've missed ?

core.es5.js:1020 ERROR Error: Hammerjs is not loaded.Solution: http://www.telerik.com/kendo-angular-ui/components/charts/troubleshooting/#toc-hammerjs-is-not-loaded

    at Function.webpackJsonp.../../../../@progress/kendo-angular-charts/dist/es/events/dom-events-builder.js.DomEventsBuilder.create (dom-events-builder.js:16)
    at Function.create (dom-events-builder.js:11)
    at Chart._attachEvents (chart.js:613)
    at chart.js:69
    at Function.loadFonts (font-loader.js:45)
    at Function.preloadFonts (font-loader.js:53)
    at new Chart (chart.js:65)
    at ChartComponent.webpackJsonp.../../../../@progress/kendo-angular-charts/dist/es/chart.component.js.ChartComponent.createInstance (chart.component.js:127)
    at chart.component.js:245
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)

 

 

[Svet]

Hi Saquib,

This is a common error that is displayed when hammerjs is not loaded.

As far as I understand, you have installed Hammer.js npm package and imported it in a component typescript file. However the import has to be done in appModule as shown in the following sample plunker:

http://plnkr.co/edit/6RKIneFvEwPaPhzs35WD?p=preview

In app/app.module.ts I have the following:

import { NgModule }      from '@angular/core';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpModule } from '@angular/http';

import 'hammerjs';

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ChartsModule, HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

I hope this helps.

Regards,
Svetlin
Progress Telerik