Kendo-angular: Charts - Cannot read property 'trim' of undefined

[mcm-ham]

When trying to render a line or donut chart I seem to get this error:

ERROR TypeError: Cannot read property 'trim' of undefined
    at splitStr (hammer.js:173)
    at Manager.off (hammer.js:2041)
    at DomEvents.Array.concat.DomEvents.unbind (dom-events.js:135)
    at DomEvents.Array.concat.DomEvents.bind (dom-events.js:120)
    at new DomEvents (dom-events.js:82)
    at Function.Array.concat.DomEventsBuilder.create (dom-events-builder.js:28)
    at Function.create (dom-events-builder.js:11)
    at Chart._attachEvents (chart.js:601)
    at chart.js:69
    at Function.loadFonts (font-loader.js:45)

The problem seems to be kendo is calling “this.hammerInstance.off()” function from hammerjs without specifying the events argument causing the undefined error:

dom-events.js – kendo-angular-charts

DomEvents.prototype.unbind = function () {
    if (this.hammerInstance) {
      this.hammerInstance.off();
    }
    this.eventHAndlers = {};
}
DomEvents.prototype.destroy = function () {
    if (this.hammerInstance) {
      this.hammerInstance.off();
      delete this.hammerInstance;
    }
    this.eventHAndlers = {};
}

hammerjs
https://github.com/hammerjs/hammer.js/blob/2.0.0/hammer.js#L2124

off: function(events, handler) {
    var handlers = this.handlers;
    each(splitStr(events), function(event) {
        if (!handler) {
            delete handlers[event];
        } else {
            handlers[event].splice(inArray(handlers[event], handler), 1);
        }
    });
    return this;
},

https://github.com/hammerjs/hammer.js/blob/2.0.0/hammer.js#L217

function splitStr(str) {
    return str.trim().split(/\s+/g);
}

I'm using:
@progress/[email protected]
[email protected]

[danielkaradachki]

Indeed, this is a bug. We will fix it with the next patch. For now, I can suggest to update the hammerjs version which includes a check for undefined events parameter.

[mcm-ham]

Thanks I thought I was using the latest, turns out ionic-angular embeds hammerjs and it's picking up that version for some reason.

[Corona17]

For anyone here from Google, be sure to include the following line in the .module.ts file on the page that uses the Kendo Chart.

import 'hammerjs';

[JayEnaR]

You can also include it in your package.json or angular-cli.json for older Angular.

node_modules/hammerjs/hammer.min.js