Angular 16升级后ng2-charts v5.0.3出现registerables不可迭代错误

问题根源 #

这个错误的核心原因是ng2-charts v5.x 依赖 Chart.js ^4.x 版本，如果你的项目中 Chart.js 版本低于4.x（比如3.x或更早），就会触发该错误——Chart.js 4.x 才将registerables调整为可迭代的数组结构，旧版本的结构无法被ng2-charts正确识别。

解决方案步骤 #

• 安装匹配版本的 Chart.js
  执行命令安装符合要求的Chart.js 4.x版本：

  npm install chart.js@^4.4.0 --save
  

  （版本号可根据ng2-charts v5.0.3的官方依赖要求调整，确保是>=4.2.0的4.x版本）

• 全局注册 Chart.js 组件
  在项目根模块（如app.module.ts）中，导入并注册Chart.js的registerables：

  import { NgChartsModule } from 'ng2-charts';
  import { Chart, registerables } from 'chart.js';
  
  // 注册所有Chart.js可用图表组件
  Chart.register(...registerables);
  
  @NgModule({
    imports: [NgChartsModule]
  })
  export class AppModule { }
  

• 清理缓存并重建项目

  1. 清理npm缓存：

     npm cache clean --force
     

  2. 删除旧依赖文件：

     rm -rf node_modules package-lock.json
     

  3. 重新安装依赖：

     npm install
     

  4. 重启项目：

     ng serve
     

• 排查依赖冲突（可选）
  如果上述步骤无效，检查是否有其他依赖强制引入了旧版本Chart.js：

  npm ls chart.js
  

  若发现版本冲突，可在package.json中通过overrides字段强制指定Chart.js版本：

  "overrides": {
    "chart.js": "^4.4.0"
  }
  

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