Angular 16复现Highcharts Dashboard演示遇TS2717错误求助

一、处理TS2717类型重复声明错误 #

该错误源于Highcharts Dashboard 1.2.0类型定义文件内部重复声明KPI属性，可通过以下方式解决：

• 临时跳过库类型检查：在项目根目录的tsconfig.json中，将skipLibCheck设为true，让TypeScript跳过第三方库的类型检查，绕过重复声明问题：

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

• 降级Dashboards版本：若不想跳过类型检查，可尝试降级到无此问题的1.1.0版本，执行命令：

  npm uninstall @highcharts/dashboards
  npm install @highcharts/dashboards@1.1.0
  

• 规范导入逻辑：确认代码中未同时从@highcharts/dashboards/es-modules/Dashboards/Plugins/HighchartsPlugin和@highcharts/dashboards/es-modules/Dashboards/Components/KPIComponent重复导入KPI相关模块，统一通过HighchartsPlugin注册组件即可。

二、修复仪表盘显示异常问题 #

从截图来看，仪表盘样式未正常加载或初始化不完整，可按以下步骤排查：

• 导入Dashboard样式文件：确保已引入官方CSS样式，可在angular.json的styles数组中添加：

  "styles": [
    // 其他项目样式...
    "node_modules/@highcharts/dashboards/css/dashboards.css"
  ]
  

  也可在组件文件顶部直接导入：

  import '@highcharts/dashboards/css/dashboards.css';
  

• 确认初始化代码正确性：确保正确注册Highcharts插件并初始化仪表盘，示例代码参考：

  import Dashboards from '@highcharts/dashboards';
  import HighchartsPlugin from '@highcharts/dashboards/es-modules/Dashboards/Plugins/HighchartsPlugin';
  
  // 注册插件
  Dashboards.plugins.registerPlugin(HighchartsPlugin);
  
  // 初始化仪表盘
  Dashboards.board('container', {
    // 配置项参考目标演示项目
    components: [
      // KPI组件及其他组件配置
    ]
  });
  

• 检查容器元素：确认页面中存在对应ID的容器元素（如演示项目中的container），且容器设置了足够的宽高样式，避免因容器尺寸问题导致渲染异常。

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