Angular 19中使用Highcharts出现SSR控制台错误

我之前在Angular SSR项目里也碰到过一模一样的Highcharts报错，当时折腾了好一会儿才搞定，给你几个靠谱的排查和解决方向：

1. 确保Highcharts只在浏览器环境下初始化
   这个错误本质是SSR服务端环境没有浏览器的window/document对象，Highcharts内部的事件创建逻辑（也就是报错里的createEvent）找不到依赖才炸的。
   你可以用Angular自带的isPlatformBrowser来做环境判断：

import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngAfterViewInit() {
  // 只在浏览器环境下创建图表
  if (isPlatformBrowser(this.platformId)) {
    // 这里放你的Highcharts初始化代码，或者调用组件的更新方法
  }
}

如果用的是highcharts-angular组件，也可以直接给组件加条件渲染，避免服务端加载：

<highcharts-chart *ngIf="isBrowser" [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>

然后在组件里提前定义：isBrowser = isPlatformBrowser(this.platformId);

2. 检查版本兼容性
   Angular 19是比较新的版本，要确保highcharts和highcharts-angular的版本能兼容它。建议直接更到最新稳定版试试：

npm install highcharts@latest highcharts-angular@latest

如果更新后还是有问题，也可以试试highcharts@12.3.0+和highcharts-angular@4.0.0+的组合，这个版本区间开始支持Angular 16+，理论上能兼容19。

3. 调整SSR的服务端打包配置
   在server.ts或者angular.json里，把Highcharts相关模块排除在服务端打包之外，让它只在浏览器端加载：

• 比如在angular.json的server构建配置里加externalDependencies：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json",
    "externalDependencies": [
      "highcharts",
      "highcharts-angular"
    ]
  }
}

或者在app.config.ts的 hydration 配置里禁用不必要的服务端缓存：

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withNoHttpTransferCache()),
    // 其他你的配置项
  ]
};

4. 按需导入Highcharts模块
   如果用到了饼图之外的额外模块，也要确保只在浏览器环境下导入，别让服务端去解析：

if (isPlatformBrowser(this.platformId)) {
  import('highcharts/modules/pie').then(module => {
    module.default(Highcharts);
    // 模块加载完成后再创建图表
    this.createChart();
  });
}

总的来说，核心思路就是把Highcharts的所有渲染、初始化逻辑都限制在浏览器环境里，不让服务端碰它，就能避开这个SSR专属的错误了。

备注：内容来源于stack exchange，提问作者user2052283