我正在尝试在 Angular 应用程序中实现 Kendo Grid，但启用 Kendo Grid 组件时遇到以下错误：
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)
// ... more stack trace
相关代码如下：
队列网格.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';
// ... imports from './queue-list-record.model'
@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() {
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 {
}
}
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>
模块相关部分
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",
"@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",
"tslerp": "^1.0.5",
"typescript": ">=3.9.0 <4.1.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"underscore": "^1.12.1",
"webpack-merge": "^4.2.2",
"xlsx": "^0.17.3",
"zone.js": "^0.10.3"
然而，经过长达数小时的研究，我在 Kendo Grid 和 Angular 10 上下文中找不到与“类构造函数 vA 无法在没有‘new’的情况下调用”错误相关的任何解决方案。 尝试将 tsconfig.json 中的 TypeScript 编译器选项从 es5 更新为 es6，看看是否可以解决任何兼容性问题，但错误仍然存在。 我已验证 @progress/kendo-angular-grid 安装是否正确并存在于 package.json 中。我还验证了所有基于 Kendo 的软件包是否都是最新的兼容版本。 因此，我检查了在模板中使用 Kendo Grid 组件的语法是否正确。嗯，它确实逐字遵循 Angular 官方 Kendo UI 文档。 我尝试通过删除排序、分页和过滤等功能来简化网格，以查看问题是否在最小配置下仍然存在： 我还检查了 node_modules 文件夹，以确保 Kendo UI 网格文件存在其中，没有任何明显的安装问题。 我尝试清理 npm 缓存并重新安装 node_modules 以排除潜在的包损坏问题。 （例如，npm cache clean --force 和 npm install）
任何解决此错误的帮助将不胜感激！
要解决此问题，您可以将以下部分添加到 Webpack 配置中：
resolve: {
mainFields: ['es2015', 'browser', 'module', 'main']
}
这将确保 Webpack 正确选择正确的模块入口点；这可能会阻止问题的出现，可能是那些与类构造函数和模块加载相关的问题