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 asng build --configuration="es"
), and serve the application using another server, for examplehttp-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.
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
-
In your
.npmrc
file, remove the following lines:sh@progress:registry=https://registry.npm.telerik.com/ //registry.npm.telerik.com/:_authToken=<token>
-
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:
- Import the Kendo UI component module in the same module where declared and intended to be used, or
- 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:
- 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:
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:
public callBack = (value) => {
...
}
Alternatively you can explicitly bind this
:
constructor() {
this.callBack = this.callBack.bind(this);
}