开启styledMode后Highcharts-Angular在Safari中无法导出图片

核心问题 #

在Angular项目中使用Highcharts + highcharts-angular封装器，开启styledMode: true后，仅在Safari 16.4中出现导出图片无响应的情况，控制台抛出TypeError: Attempted to assign to readonly property，Chrome、Firefox等浏览器无此问题。本地demo和新建Angular 15项目均能复现，但Stackblitz示例正常。

可能的解决方案 #

1. 升级Highcharts版本 #

当前使用的Highcharts 10.3.3可能存在与Safari 16.4的兼容性bug，后续版本（如11.x及以上）已修复类似的styledMode导出问题。执行以下命令升级：

npm install highcharts@latest

升级后重新测试导出功能，看是否解决问题。

2. 调整Angular构建优化配置 #

本地Angular CLI的生产构建优化（如代码压缩、摇树优化）可能导致Highcharts导出模块的属性被标记为只读，而Stackblitz的构建环境默认优化策略不同。可以临时关闭优化验证：
在angular.json的projects.[你的项目名].architect.build.configurations.production中修改：

"buildOptimizer": false,
"optimization": false

重新构建并测试，如果导出正常，则说明是优化规则导致的问题。后续可以给Highcharts相关代码添加优化白名单，在tsconfig.json中添加：

"angularCompilerOptions": {
  "enableIvy": true,
  "allowedCommonJsDependencies": ["highcharts"]
}

3. 调整导出模块配置 #

强制使用客户端导出，避免依赖导出服务器的处理，在图表配置中添加：

exporting: {
  fallToExportServer: false
}

该配置会让Highcharts直接在本地处理导出逻辑，绕过可能触发Safari只读属性报错的服务器交互环节。

4. 临时切换styledMode状态 #

在导出前临时关闭styledMode，导出完成后恢复，避免Safari对styledMode下的SVG样式属性做只读限制：

// 假设你通过组件引用获取图表实例
exportChart() {
  const chartInstance = this.highchartsComponent.chart;
  // 临时关闭styledMode
  chartInstance.options.styledMode = false;
  chartInstance.update({}, true);
  // 执行导出
  chartInstance.exportChart();
  // 延迟恢复styledMode，确保导出流程完成
  setTimeout(() => {
    chartInstance.options.styledMode = true;
    chartInstance.update({}, true);
  }, 100);
}

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