Hammer.js Error When Installing Chart Component

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

When I try to install the Chart component, a Hammer.js-related error occurs.

Cause

Prior to v16.3.0, the Kendo UI for Angular Charts package used to require Hammer.js as a dependency. If you do not have Hammer.js installed, you will receive an error when trying to use the Chart component.

Solution

To resolve this issue, follow these steps:

1. Install Hammer.js by executing the following command in your terminal:

   bash

   npm install hammerjs --save

2. After Hammer.js is successfully installed, ensure to import it either in the application module or directly into the standalone component that utilizes the Chart component.

   • For modular projects, import Hammer.js in the application module:
   typescript

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   import { ChartModule } from '@progress/kendo-angular-charts';
   import 'hammerjs';
   
   @NgModule({
       bootstrap: [AppComponent],
       imports:   [
           BrowserModule, BrowserAnimationsModule, ChartModule
       ]
   })
   export class AppModule { }

   • For projects using the standalone component approach, import Hammer.js directly into the component that uses the Chart component:
   typescript

   import { Component } from '@angular/core';
   import { ChartModule } from '@progress/kendo-angular-charts';
   import 'hammerjs';
   
   @Component({
       standalone: true,
       selector: 'my-app',
       imports: [ChartModule],
       template: `
           <kendo-sparkline>...</kendo-sparkline>
       `
   })

Additional Resources

• Angular Charts Overview
• Getting Started with Angular Charts
• API Reference of the Charts