Angular5.2升级至17与Kendo17后出现Class构造函数运行时错误求助

问题原因 #

这个错误本质是ES5编译目标与ES6原生类的兼容性冲突：ES6类要求必须用new关键字实例化，但如果你的项目编译目标设为ES5，编译工具会把代码转成ES5风格的构造函数，而Kendo UI的shape-builder模块使用了未转译的ES6类，导致运行时调用方式不匹配。

解决方案 #

1. 调整TypeScript编译目标 #

修改项目根目录的tsconfig.json，将target字段从ES5改为ES2015或更高版本（比如ES2020）：

{
  "compilerOptions": {
    "target": "ES2015",
    // 其他配置...
  }
}

Angular 17本身推荐使用ES2020+作为编译目标，这能完美兼容ES6类的语法。

2. 确保Kendo UI包版本统一 #

检查所有@progress/kendo-angular-*系列包的版本是否都是17.x，避免混合不同版本的依赖：

npm list @progress/kendo-angular-charts

如果存在版本不一致的情况，重新安装对应版本：

npm install @progress/kendo-angular-charts@17.x.x

（替换17.x.x为具体的17版本号，比如17.0.0）

3. 清理依赖并重新安装 #

删除旧的依赖缓存和锁文件，重新安装依赖以确保所有包都是兼容的版本：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装
npm install

4. 检查自定义Webpack/Babel配置（如果有） #

如果项目自定义了Webpack或Babel配置，确保：

• Babel的@babel/preset-env没有强制将代码转译为ES5
• 目标浏览器配置支持原生ES6类（可以在browserslist中设置last 2 versions或类似规则）

注意事项 #

绝对不要直接修改node_modules中的shape-builder.js文件，因为修改会被后续依赖安装覆盖，且可能引入其他未知问题。

内容的提问来源于stack exchange，提问作者Deeksha