I am currently working on integrating a Kendo Grid into my Angular application. However, I have run into an error when enabling the Kendo Grid component:
vendor.4add67dadae0cd9152b9.js:16 ERROR Error: Uncaught (in promise): TypeError: Class constructor vA cannot be invoked without 'new'
TypeError: Class constructor vA cannot be invoked without 'new'
at new t (index.js:2890:28)
at new e (index.js:6780:28)
at Sg (core.js:23695:20)
at _g (core.js:23564:22)
// more stack trace goes here
Below is the relevant code snippet:
queue-grid.component.ts:
import { Component, OnInit, OnDestroy, Input, Inject } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
//... other import statements
@Component({
selector: "queue-grid",
moduleId: module.id.toString(),
templateUrl: "./queue-grid.component.html",
providers: [
{ provide: Window, useValue: window }
]
})
export class QueueGridComponent implements OnInit, OnDestroy {
// ... component properties
public isLoading: boolean = true;
constructor() {
console.log("Queue Component Constructor");
// ... initialization
this.fetchData();
console.log("constructor end");
}
ngOnInit() {
console.log("Queue Component oninit ");
console.log("Component oninit end");
}
fetchData() {
// some code for fetching data
}
ngOnDestroy(): void {
}
}
Relevant portion of queue-grid.component.html:
<div id="dvListData">
<kendo-grid [data]="QueueListData?.data">
<kendo-grid-column field="reference" title="Reference #"> </kendo-grid-column>
<kendo-grid-column field="state" title="State"> </kendo-grid-column>
<kendo-grid-column field="dueDate" title="Due Date"> </kendo-grid-column>
</kendo-grid>
</div>
Module's relevant part:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
imports: [
GridModule
],
declarations: [
QueueGridComponent
]
})
export class QueueGridModule { }
package.json:
"@angular/animations": "^10.2.2",
//....other package versions listed here
"zone.js": "^0.10.3"
Despite extensive research over several hours, I have not been able to find a solution to the "Class constructor vA cannot be invoked without 'new'" error within the context of Kendo Grid and Angular 10.
I experimented with updating TypeScript compiler options in tsconfig.json from es5 to es6 in hopes of resolving any compatibility issues, but unfortunately, the error persisted.
I ensured that the @progress/kendo-angular-grid installation was done correctly and verified the latest compatible versions of all Kendo-related packages were installed.
Further troubleshooting steps included checking syntax for using Kendo Grid component in the template and simplifying the grid to remove features like sorting, paging, and filtering to isolate the issue. I also verified the presence of Kendo UI grid files in the node_modules folder.
Additionally, attempts were made to clean the npm cache and reinstall node_modules to rule out any potential package corruption issues (e.g., npm cache clean --force and npm install).
If anyone could assist in resolving this error, it would be greatly appreciated!