how to use kendo ui under angular V19

[David]

Hi,

 

i tried to use kendo ui at angular V19, i got the below errors when i ran ng server:

 

X [ERROR] TS2322: Type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is not assignable to type 'any[] | Type$1<any> | ModuleWithProviders<{}>'.
  The type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. [plugin angular-compiler]

 

my package.json:

 

{

  "name": "kendo-angular-app",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "watch": "ng build --watch --configuration development",

    "test": "ng test"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "^19.0.0",

    "@angular/common": "^19.0.0",

    "@angular/compiler": "^19.0.0",

    "@angular/core": "^19.0.0",

    "@angular/forms": "^19.0.0",

    "@angular/localize": "^19.0.0",

    "@angular/platform-browser": "^19.0.0",

    "@angular/platform-browser-dynamic": "^19.0.0",

    "@angular/router": "^19.0.0",

    "@progress/kendo-angular-buttons": "19.1.1",

    "@progress/kendo-angular-charts": "^19.1.1",

    "@progress/kendo-angular-common": "19.1.1",

    "@progress/kendo-angular-dateinputs": "19.1.1",

    "@progress/kendo-angular-dialog": "19.1.1",

    "@progress/kendo-angular-dropdowns": "19.1.1",

    "@progress/kendo-angular-excel-export": "19.1.1",

    "@progress/kendo-angular-grid": "^19.1.1",

    "@progress/kendo-angular-icons": "19.1.1",

    "@progress/kendo-angular-inputs": "19.1.1",

    "@progress/kendo-angular-intl": "19.1.1",

    "@progress/kendo-angular-l10n": "19.1.1",

    "@progress/kendo-angular-label": "19.1.1",

    "@progress/kendo-angular-layout": "19.1.1",

    "@progress/kendo-angular-navigation": "19.1.1",

    "@progress/kendo-angular-pager": "19.1.1",

    "@progress/kendo-angular-pdf-export": "19.1.1",

    "@progress/kendo-angular-popup": "19.1.1",

    "@progress/kendo-angular-progressbar": "19.1.1",

    "@progress/kendo-angular-toolbar": "19.1.1",

    "@progress/kendo-angular-treeview": "19.1.1",

    "@progress/kendo-angular-utils": "19.1.1",

    "@progress/kendo-data-query": "^1.0.0",

    "@progress/kendo-drawing": "^1.21.0",

    "@progress/kendo-licensing": "^1.5.0",

    "@progress/kendo-svg-icons": "^4.0.0",

    "@progress/kendo-theme-bootstrap": "^11.0.2",

    "rxjs": "~7.8.0",

    "tslib": "^2.3.0",

    "zone.js": "~0.15.0"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "^19.0.6",

    "@angular/cli": "^19.0.6",

    "@angular/compiler-cli": "^19.0.0",

    "@types/jasmine": "~5.1.0",

    "jasmine-core": "~5.4.0",

    "karma": "~6.4.0",

    "karma-chrome-launcher": "~3.2.0",

    "karma-coverage": "~2.2.0",

    "karma-jasmine": "~5.1.0",

    "karma-jasmine-html-reporter": "~2.1.0",

    "typescript": "~5.6.2"

  }

}

 

can you please help ?

 

 

[David]

any updates?

[Yanmario]

Hi David,

The package.json versions look correct and I will suggest making sure that the component is imported correctly from step two in the following article:

https://www.telerik.com/kendo-angular-ui/components/inputs/installation/getting-started#installing-the-components

For module applications - https://www.telerik.com/kendo-angular-ui/components/installation/using-modules

If the issue continues, send a runnable example or a code snippet showing how the component is imported and used. A runnable StackBlitz example is preferred, as it helps with more effective troubleshooting.

[David]

hi,

i tried the above 2 methods, but still failed, i got the below error，

i also attached my all source code.

please helper

thank you very much.

[Yanmario]

Hi David,

For a module-based Angular application, you would need to use the module imports of our components:

https://www.telerik.com/kendo-angular-ui/components/installation/using-modules

Feel free to copy and paste the below into your app.module.ts and your application will run:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { ExcelModule, GridModule, PDFModule } from '@progress/kendo-angular-grid';
import { InputsModule } from '@progress/kendo-angular-inputs';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GridModule,
    ChartsModule,
    InputsModule,
    ExcelModule,
    PDFModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

I hope this helps.

[David]

hi

your suggestion works very well.

 

thank you very much.