New to Kendo UI for Angular? Start a free 30-day trial

Kendo UI for Angular Troubleshooting

This article provides solutions for issues you might encounter while working with the Kendo UI suite for Angular.


I cannot install the latest versions of Kendo UI packages for Angular


Due to recurring issues with the initial privately-scoped Progress registry, all Kendo UI packages for Angular are now published on the public registry. For more information, refer to issue/712.


  1. In your .npmrc file, remove the following lines:

  2. If present, remove package-lock.json to clear the stored package locations.

When I try to load a Kendo UI component for Angular, a runtime error occurs that the component is not recognized

The error message might be similar to Can't bind to '[property-name]' since it isn't a known property of 'kendo-[component-name]'.


The Kendo UI component module is either:

  • Not imported in the module where it is declared and intended to be used, or
  • Not re-exported from a SharedModule which declares the component in which the Kendo UI component for Angular is used.


Depending on the scenario of your project, either:

  1. Import the Kendo UI component module in the same module where it is declared and intended to be used, or
  2. Re-export the Kendo UI component module from [YourCustom]Module, which imports the Kendo UI module for Angular.

For more information on a real use case issue, refer to this Telerik forum thread.

For more information on how to handle Angular modules, refer to the:

For more information on how to implement Angular Forms by using Kendo UI form components, refer to the:

The error message might be similar to:

ERROR in ./$$_gendir/~/@progress/kendo-angular-popup/dist/es/popup.component.ngfactory.ts
    Module parse failed: C:\[user-specific path]\$$_gendir\node_modules\@progress\kendo-angular-popup\dist\es\popup.component.ngfactory.ts Unexpected token (17:27)
    You may need an appropriate loader to handle this file type.
    | import * as i6 from '@progress/kendo-angular-popup/dist/es/services/resize.service';
    | import * as i7 from '@progress/kendo-angular-popup/dist/es/services/scrollable.service';
    | const styles_PopupComponent:any[] = ([] as any[]);
    | export const RenderType_PopupComponent:i0.RendererType2 = i0.╔Ácrt({encapsulation:2,
    |     styles:styles_PopupComponent,data:{'animation':[{type:7,name:'toggle',definitions:[{type:1,
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 10:0-118
     @ ./ClientApp/boot.browser.ts


The JavaScriptServices team erroneously assume that the Angular components in the .NET Core template are present in the ClientApp folder only. As a result, the publishing process fails when Webpack encounters such code elsewhere.


To solve this issue, either:


I cannot export my component to PDF on mobile devices with iOS Safari browser

The PDF Export module does not claim to support mobile browsers and exports may fail completely or be partially broken.


The iOS Safari browser does not support the download attribute up to version 12.x. As a result, the PDF file is generated, but cannot be saved.


Set up the server-side proxy.

Dealing with the execution context

I cannot capture the execution context of the current class


The reason for this issue is that the context of "this" depends on multiple conditions related to the code structure and the calling context.


Provide the callback as an arrow function to capture the 'this' execution context of the class:

  public callBack = (value) => {

... or explicitly bind "this":

  constructor() {
    this.callBack = this.callBack.bind(this);