HammerJS error

2 posts, 0 answers
  1. Saquib
    Saquib avatar
    5 posts
    Member since:
    Aug 2015

    Posted 02 Nov 2017 Link to this post

    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)

     

     

  2.
  3. Svetlin
    Admin
    Svetlin avatar
    91 posts

    Posted 03 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top