Angular集成Chart.js报错：Cannot use import statement outside a module

问题根源 #

报错本质是Angular的模块处理逻辑与你额外添加的"type": "module"配置冲突，或是在angular.json中全局引入了非模块形式的Chart.js脚本，同时又在组件中使用ES模块导入，导致加载逻辑混乱。Angular CLI本身已基于ES模块构建项目，不需要依赖package.json中的type字段。

修复步骤 #

1. 移除package.json中的"type": "module"配置 #

这个字段是给Node.js原生模块使用的，添加后会干扰Angular的构建流程，直接删除即可。

2. 清理angular.json中的全局脚本引用 #

打开angular.json，找到architect -> build -> options -> scripts数组，若其中有chart.js或chart.js/auto的引用，直接删除。全局引入的脚本是非模块形式，会和组件中的ES模块导入产生冲突。

3. 确保依赖安装正确 #

执行以下命令重新安装Chart.js（若之前安装有问题）：

npm install chart.js

Chart.js自带TypeScript类型定义，无需额外安装@types/chart.js。

4. 组件中正确初始化Chart #

必须在组件的ngAfterViewInit钩子中初始化Chart（此时canvas元素已渲染完成），示例代码如下：

组件TS文件（chart.component.ts）

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Chart } from 'chart.js/auto';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements AfterViewInit {
  @ViewChild('chartCanvas') chartCanvas!: ElementRef<HTMLCanvasElement>;
  private chartInstance!: Chart;

  ngAfterViewInit(): void {
    this.initChart();
  }

  private initChart(): void {
    this.chartInstance = new Chart(this.chartCanvas.nativeElement, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [{
          label: 'Sample Data',
          data: [10, 20, 15, 25, 30],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

组件HTML文件（chart.component.html）

<canvas #chartCanvas></canvas>

5. 验证TypeScript配置 #

确保tsconfig.json的compilerOptions中模块配置正确，示例片段如下：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "node",
    "lib": ["ES2022", "dom"],
    // 其他配置...
  }
}

验证修复 #

执行ng serve重启项目，查看报错是否消失，Chart是否能正常渲染。

内容的提问来源于stack exchange，提问作者Rafał Developer