升级Angular从7到14后Highcharts出现构建错误

1. 锁定兼容的依赖版本 #

Angular 14需要搭配对应版本的highcharts-angular和highcharts核心包，避免版本不匹配导致的API差异：

• 卸载现有相关包：

  npm uninstall highcharts highcharts-angular
  

• 安装兼容版本：

  npm install highcharts@^10.3.3 highcharts-angular@^3.1.0
  

（注：highcharts-angular 3.x系列适配Angular 12-14，Highcharts 10.x与该版本组件兼容）

2. 重构Highcharts组件用法 #

旧版本highcharts-angular的输入/输出属性在新版本中已调整，需按官方规范重构：

• 模板层面：不再直接绑定series、title等零散属性，统一通过[options]传递完整配置：

  <!-- 旧写法（Angular7时期） -->
  <highcharts-chart [series]="mySeries" (chartClick)="handleClick($event)"></highcharts-chart>
  
  <!-- 新写法（Angular14） -->
  <highcharts-chart 
    [options]="chartOptions" 
    (chartInstanceLoaded)="onChartReady($event)"
  ></highcharts-chart>
  

• 组件逻辑层面：使用Highcharts官方类型定义配置项，通过图表实例绑定事件：

  import * as Highcharts from 'highcharts';
  
  export class MyChartComponent {
    chartOptions: Highcharts.Options = {
      title: { text: '示例图表' },
      series: [{
        type: 'line',
        data: [1, 3, 2, 4]
      }]
    };
  
    onChartReady(chart: Highcharts.Chart) {
      // 通过图表实例绑定点击事件
      chart.on('click', (event) => {
        this.handleChartClick(event);
      });
    }
  
    handleChartClick(event: Highcharts.ChartClickEvent) {
      // 处理点击逻辑
    }
  }
  

3. 修复TypeScript类型错误 #

Angular14默认开启严格类型检查，需替换旧的any类型为Highcharts官方类型：

• 所有图表配置变量使用Highcharts.Options、Highcharts.SeriesOptionsType等类型，避免隐式any报错
• 若遇到第三方类型缺失，安装@types/highcharts（注意版本与Highcharts核心包一致）：

  npm install @types/highcharts@^10.3.0 --save-dev
  

4. 处理Angular模板严格模式报错 #

Angular14的strictTemplates会拦截模板中不存在的输入/输出属性：

• 移除模板中绑定的旧属性（如[series]、(chartClick)），这些属性在新版highcharts-angular中已不再暴露
• 若需自定义扩展，通过chartCallback输入属性注入自定义逻辑，而非直接绑定未定义的事件

5. 清理依赖缓存 #

之前的版本升降可能导致依赖缓存混乱，执行以下操作重置依赖：

rm -rf node_modules package-lock.json
npm install

6. 精准禁用ESLint规则（而非全局忽略） #

若仍有个别类型报错，针对特定代码行禁用规则，而非全局关闭：

// @ts-ignore: Highcharts类型定义兼容问题
chart.someCustomMethod();

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