Angular 14安装Highcharts Dashboards报错，寻求解决方法

问题根源 #

报错是因为@highcharts/dashboards依赖的Highcharts内部模块路径，与你安装的@types/highcharts版本不匹配；或是Angular 14对应的TypeScript版本（通常为4.6.x），和新版Dashboards的类型定义不兼容（你参照的是Angular 16示例，其TS版本更高）。

修复步骤 #

1. 对齐Highcharts与@types/highcharts版本

卸载现有版本，安装和Dashboards兼容的匹配版本：

• 先查看node_modules/@highcharts/dashboards/package.json中的peerDependencies，找到要求的Highcharts版本范围（比如>=10.0.0 <12.0.0）
• 执行卸载：

  npm uninstall highcharts @types/highcharts
  

• 安装指定兼容版本（以v10.x为例）：

  npm install highcharts@10.x @types/highcharts@10.x
  

2. 手动添加缺失的类型声明文件

如果版本对齐后仍报错，手动创建类型声明覆盖缺失模块：

• 在项目src目录下新建highcharts-custom.d.ts文件，内容如下：

  declare module 'highcharts/es-modules/Core/Globals' {
      import Highcharts from 'highcharts';
      export default Highcharts;
  }
  

• 打开tsconfig.json，将该文件添加到include数组：

  "include": [
      "src/**/*",
      "src/highcharts-custom.d.ts"
  ]
  

3. 调整导入与初始化方式

修改组件中的导入代码，确保Dashboards正确绑定Highcharts：

import * as Highcharts from 'highcharts';
import * as Dashboards from '@highcharts/dashboards/dashboards';

// 初始化前绑定Highcharts插件
Dashboards.PluginHandler.addPlugin(Highcharts);

// 后续编写Dashboards初始化代码

4. 临时跳过库类型检查（可选）

如果以上方法都无效，可临时在tsconfig.json中开启skipLibCheck跳过库类型检查（不推荐长期使用，仅用于快速验证）：

"compilerOptions": {
    // 其他配置...
    "skipLibCheck": true
}

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