Jithin
Top achievements
Rank 1
Rank 1
I'm in the process of upgrading an Angular application from version 8 to 10. After the upgrade, I'm encountering the following error while using Kendo Grid in my Angular application,
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)
at mk (core.js:30653:38)
at Dk (core.js:30969:13)
at Ck (core.js:30888:13)
at mk (core.js:30681:5)
at Dk (core.js:30969:13)
at Ck (core.js:30888:13)Here's the relevant code:
queue-grid.component.ts:
import { Component, OnInit, OnDestroy, Input, Inject } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import { Subscription } from "rxjs/Subscription"
import * as _ from 'lodash';
@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");
this.fetchData();
console.log("constructor end");
}
ngOnInit() {
console.log("Queue Component oninit ");
console.log("Component oninit end");
}
fetchData() {
setTimeout(() => {
this.QueueListData = {
data: [
{ reference: "12345", state: "CA", dueDate: "10/20/2024" },
{ reference: "67890", state: "NY", dueDate: "10/25/2024" },
{ reference: "54321", state: "TX", dueDate: "10/30/2024" }
],
total: 3
};
this.isLoading = false;
}, 2000);
}
ngOnDestroy(): void {
}
}Relevant parts 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>Relevant parts of Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
GridModule ,BrowserAnimationsModule
],
declarations: [
QueueGridComponent
]
})
export class QueueGridModule { }package.json:
"@angular/animations": "^10.2.2", "@angular/common": "^10.2.2", "@angular/compiler": "^10.2.2", "@angular/compiler-cli": "^10.2.2", "@angular/core": "^10.2.2", "@angular/forms": "^10.2.2", "@angular/platform-browser": "^10.2.2", "@angular/platform-browser-dynamic": "^10.2.2", "@angular/platform-server": "^10.2.2", "@angular/router": "^10.2.2", "@angular/upgrade": "^10.2.2", "@ng-bootstrap/ng-bootstrap": "^8.0.0", "@progress/kendo-angular-buttons": "^5.0.0", "@progress/kendo-angular-common": "^1.0.0", "@progress/kendo-angular-dateinputs": "^4.0.0", "@progress/kendo-angular-dropdowns": "^4.0.0", "@progress/kendo-angular-excel-export": "^3.0.0", "@progress/kendo-angular-grid": "^4.7.3", "@progress/kendo-angular-inputs": "^6.0.0", "@progress/kendo-angular-intl": "^2.0.0", "@progress/kendo-angular-l10n": "^2.0.0", "@progress/kendo-angular-layout": "^5.1.0", "@progress/kendo-angular-pdf-export": "^2.0.0", "@progress/kendo-angular-popup": "^3.0.0", "@progress/kendo-data-query": "^1.5.5", "@progress/kendo-date-math": "^1.3.0", "@progress/kendo-drawing": "^1.0.0", "@progress/kendo-file-saver": "^1.0.3", "@progress/kendo-ooxml": "^1.0.2", "@progress/kendo-popup-common": "^1.0.0", "@progress/kendo-theme-default": "^3.0.0", "@telerik/kendo-draggable": "^1.5.1", "@telerik/kendo-dropdowns-common": "^1.0.0", "@telerik/kendo-inputs-common": "^2.2.1", "@telerik/kendo-intl": "^1.2.0", "@telerik/kendo-theme-default": "^1.33.4", "@types/file-saver": "^2.0.0", "angular-d3-charts": "^4.4.7", "angular-highcharts": "^10.0.1", "angular-router-loader": "^0.8.2", "angular-tree-component": "^8.5.5", "angular2-template-loader": "^0.6.2", "bootstrap": "^4.3.1", "copy-webpack-plugin": "^4.3.1", "core-js": "^2.6.1", "file-saver": "^2.0.1", "hammerjs": "^2.0.8", "highcharts": "^9.2.2", "highcharts-stock": "^0.1.7", "html-loader": "^0.5.5", "html-webpack-plugin": "^4.0.0", "jquery": "^3.2.1", "jszip": "^3.2.0", "lodash": "^4.14.172", "mini-css-extract-plugin": "^0.1.0", "mobx": "^4.0.1", "moment": "^2.22.2", "ngx-file-drop": "^11.0.0", "ng2-input-autocomplete": "^0.3.5", "ng2-select": "^2.0.0", "ngx-smart-popover": "^1.0.4", "ngx-textarea-autosize": "^2.0.0", "ngx-toastr": "^13.0.0", "npm": "^8.5.5", "raw-loader": "^0.5.1", "rxjs": "^6.5.3", "rxjs-compat": "^6.6.7", "style-loader": "^0.19.1", "systemjs": "^0.19.39", "ts-loader": "^6.0.0", "typescript": ">=3.9.0 <4.1.0", "zone.js": "^0.10.3"
tsconfig.json
"compilerOptions": {
"baseUrl": "",
"lib": [ "es2016", "dom" ],
"downlevelIteration": true,
"target": "es6",
"module": "esnext",
"noImplicitAny": false,
"sourceMap": true,
"preserveConstEnums": true,
"noEmitOnError": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": false,
"allowSyntheticDefaultImports": true,
"declaration": false,
"moduleResolution": "Node"
}I'm seeing 'constructor end' in the console, but then it throws the error that i mentioned above.