Angular预渲染Chart.js(v3.9.1)时出现导出错误求助

问题分析 #

执行npm run prerender时出现导出错误，核心原因：

• Chart.js v3.x的chart.js/auto模块中，Chart是命名导出，而非代码中使用的默认导出，预渲染阶段模块解析严格检查导出匹配，因此抛出找不到default导出的错误。
• 额外注意：预渲染在服务器端执行，缺少浏览器DOM环境，直接初始化Chart会引发后续Canvas相关报错。

解决方案 #

1. 修正导入语法 #

将默认导入改为命名导入，匹配Chart.js的导出规则：

// 替换原来的两行导入
import { Chart, ChartConfiguration } from 'chart.js/auto';

2. 添加服务器端环境判断 #

利用Angular的PLATFORM_ID和isPlatformBrowser工具，确保仅在浏览器环境初始化Chart：

首先导入相关依赖：

import { Component, ElementRef, Input, OnInit, ViewChild, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

修改后的完整组件代码：

@Component({
  selector: 'app-chartjs',
  templateUrl: './chartjs.component.html',
  styleUrls: ['./chartjs.component.scss']
})
export class ChartjsComponent implements OnInit {
  @ViewChild('myChart') myCanvas!: ElementRef<HTMLCanvasElement>;
  @Input() config: ChartConfiguration; 
  myChart: Chart | undefined;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

  ngOnInit(): void { }

  ngAfterViewInit() {
    // 仅在浏览器环境初始化Chart
    if (isPlatformBrowser(this.platformId)) {
      this.myChart = new Chart(this.myCanvas.nativeElement, this.config);
    }
  }
}

说明 #

• 命名导入直接对应错误提示中列出的Chart导出项，修正了模块导出不匹配的问题。
• 环境判断避免了服务器端执行时因缺少DOM API导致的额外报错，确保预渲染流程正常完成。

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