angular-highcharts集成报错排查：TS2688及Highcharts #16错误

你遇到的这两个问题其实是连贯的：先缺少类型定义导致TS编译错误，解决后又因为重复加载Highcharts库触发了Error #16。结合你的环境（Angular 5.1.3、angular-cli 1.6.0、TypeScript 2.4.2），我来给你一步步排查解决：

1. 先理解Error #16的本质 #

Highcharts Error #16是库重复加载的报错——你的项目里同时通过两种方式引入了Highcharts，导致冲突。这通常是配置不当造成的，接下来我们逐一修正：

2. 修正package.json依赖配置 #

首先，angular-highcharts本身依赖highcharts，所以你不需要手动单独添加highcharts到dependencies（除非你需要指定特定版本），但要确保@types/highcharts的版本和实际安装的highcharts版本匹配。你用的@types/highcharts@5.0.12对应的是Highcharts 5.x系列，所以你的package.json依赖应该类似这样：

"dependencies": {
  // 其他依赖...
  "angular-highcharts": "^5.2.0", // 适配Angular 5的版本
  "highcharts": "^5.0.14",
  "@types/highcharts": "^5.0.12"
}

3. 检查angular-cli.json的脚本配置 #

因为你用的是angular-cli 1.6.0，配置文件是angular-cli.json，很多人会在这里的apps[0].scripts数组里手动添加Highcharts的脚本，比如：

"scripts": [
  "../node_modules/highcharts/highcharts.js" // 这行要删掉！
]

这会导致全局加载Highcharts，而angular-highcharts内部又会导入一次Highcharts，直接触发重复加载的Error #16。所以一定要确保这里没有添加任何Highcharts相关的脚本。

4. 修正组件中的导入方式 #

在你的组件代码里，要通过angular-highcharts提供的接口来使用，不要直接导入Highcharts本身：

// ✅ 正确的导入方式
import { Chart } from 'angular-highcharts';

// ❌ 错误的导入方式（会导致重复加载）
// import * as Highcharts from 'highcharts';

创建图表时，使用Chart类实例化，示例代码如下：

export class MyChartComponent {
  chart = new Chart({
    title: { text: 'My Chart' },
    series: [{ data: [1, 2, 3] }]
  });
}

5. 清理缓存并重新构建 #

有时候依赖缓存会导致异常，执行以下命令彻底清理后重新安装：

rm -rf node_modules
rm package-lock.json
npm install
ng serve --aot

这样应该就能同时解决之前的TS类型错误和现在的Error #16了。

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