Angular集成Chart.js 4.2.1报错：无法在模块外使用import语句

问题原因 #

这个错误不是仅由Chart.js导致，是chartjs-plugin-datalabels与当前项目的模块加载方式不兼容引发的：Chart.js 4.x采用ES模块语法，若项目中通过全局脚本方式引入插件，会导致插件在非模块环境下执行import语句，触发语法错误。

修复步骤 #

• 移除全局脚本引用：打开angular.json，删除scripts数组中手动添加的chart.js和chartjs-plugin-datalabels相关路径——Angular项目中通过npm安装的依赖，无需全局引入。
• 通过ES模块正确导入并注册插件：
  在需要使用图表的组件或根模块中，按以下方式导入并注册插件：

  import Chart from 'chart.js/auto';
  import ChartDataLabels from 'chartjs-plugin-datalabels';
  
  // 注册插件
  Chart.register(ChartDataLabels);
  

• 结合ng2-charts使用的配置：
  若使用ng2-charts，先在模块中导入NgChartsModule，再在组件内配置插件：

  import { NgChartsModule } from 'ng2-charts';
  import ChartDataLabels from 'chartjs-plugin-datalabels';
  import { ChartConfiguration } from 'chart.js';
  
  @Component({
    // 组件配置
  })
  export class YourChartComponent {
    public barChartOptions: ChartConfiguration['options'] = {
      plugins: {
        datalabels: {
          // 自定义插件配置，比如颜色、字体等
          color: '#2c3e50'
        }
      }
    };
  
    constructor() {
      Chart.register(ChartDataLabels);
    }
  }
  

• 验证依赖版本：你的依赖版本组合（chart.js@4.2.1、ng2-charts@4.1.1、chartjs-plugin-datalabels@2.2.0）符合兼容要求，无需调整版本。

内容的提问来源于stack exchange，提问作者Влад Прибыльнов