Angular集成Engagespot遇classProperties语法支持错误求助

我按照官方文档在Angular项目中集成Engagespot，代码如下：

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import { render } from "@engagespot/client";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {
  @ViewChild("engagespotBellIcon") engagespotBellIcon: ElementRef;

  ngAfterViewInit() {
    render(this.engagespotBellIcon.nativeElement, {
      apiKey: "<api_key>",
      userId: "user@sample.com",
      theme: {} // 自定义通知收件箱外观的主题对象
    });
  }
}

运行时出现如下语法错误：

SyntaxError
/node_modules/@engagespot/core/dist/esm/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (1:1717):

更新：已尝试按照Stack Overflow相关方案配置Babel，但问题依旧存在。

解决方法 #

1. 调整Angular编译的ES目标版本 #

修改项目根目录下的tsconfig.json，将target设置为ES2022或更高版本，同时确保lib包含对应ES版本：

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM"],
    // 其他原有配置保持不变
  }
}

2. 正确配置Babel插件 #

若之前Babel配置未生效，需确保插件安装和配置正确：

• 安装依赖：

npm install @babel/plugin-proposal-class-properties --save-dev

• 在项目根目录创建或修改babel.config.json：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

3. 改用UMD版本的Engagespot #

避免ES模块的语法兼容问题，直接引入UMD版本：

• 在angular.json的build配置中添加UMD脚本：

"architect": {
  "build": {
    "options": {
      "scripts": [
        "node_modules/@engagespot/core/dist/umd/index.js"
      ],
      // 其他配置...
    }
  }
}

• 组件中使用全局方法：

ngAfterViewInit() {
  (window as any).Engagespot.render(this.engagespotBellIcon.nativeElement, {
    apiKey: "<api_key>",
    userId: "user@sample.com",
    theme: {}
  });
}

4. 更新或回退Engagespot包版本 #

可能是包本身存在未转译的语法问题：

• 升级到最新版本：

npm update @engagespot/client @engagespot/core

• 若最新版仍有问题，尝试回退到稳定旧版本，比如：

npm install @engagespot/client@x.x.x @engagespot/core@x.x.x

（替换x.x.x为具体稳定版本号）

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