Kendo UI for Angular Troubleshooting

This article provides solutions to common issues you may face when using the Kendo UI for Angular components.

Libraries are not translated in Angular 17 app with build-angular:application

Cause

Components, coming from external libraries are not translated in Angular 17 applications that are build with the new application builder and run using ng serve.

Solution

To avoid this problem you can do any of the following:

• configure the application to use the "browser" builder in angular.json:

  ts

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
    }
  }
  ...

• build the application for the respective locale using ng build (such as ng build --configuration="es"), and serve the application using another server, for example http-server.

Further details are available in the following GitHub issues:

• https://github.com/telerik/kendo-angular/issues/4195
• https://github.com/angular/angular-cli/issues/27051
• https://github.com/angular/angular-cli/issues/26350

When I try to load a Kendo UI for Angular component in a standalone component, an error occurs

The error message might be similar to Angular detected that the 'AnimationBuilder' was injected, but animation support was not enabled.

Cause

Kendo UI for Angular components that depend on the Popup component, requires importing the Angular BrowserAnimationsModule. The error occurs in standalone components due to a missing BrowserAnimationsModule import.

Solution

In the app.config.ts file, import the BrowserAnimationsModule using importProvidersFrom function.

ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes), importProvidersFrom([BrowserAnimationsModule])]
};

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

Cause

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

Solution

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

   sh

   @progress:registry=https://registry.npm.telerik.com/
   //registry.npm.telerik.com/:_authToken=<token>

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]'.

Cause

The Kendo UI component module is either:

• Not imported in the module where 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.

Solution

Depending on the scenario of your project, either:

1. Import the Kendo UI component module in the same module where 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:

• Official Angular documentation on ngModule.
• Angular FAQs.

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

• Official Angular documentation on Forms.
• Articles on forms support for each Kendo UI form component. For example, the article on the forms supported by the NumericTextBox.

When I try to use Kendo UI for Angular in my .NET project, Webpack-related errors occur

The error message might be similar to:

sh

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

Cause

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.

Solution

To solve this issue, either:

• Upgrade the version of your template, or
• Apply the fix suggested by the .NET team.

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.

Cause

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.

Solution

Set up the server-side proxy.

I cannot capture the execution context of the current class

Cause

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

Solution

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

ts

public callBack = (value) => {
    ...
}

Alternatively you can explicitly bind this:

ts

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

Suggested Links

• Frequently Asked Questions (FAQs)
• Kendo UI for Angular Components
• All Things Angular Telerik Blog Page