Angular 19集成Highcharts DrillDown报错：Ye(...) is not a function

这个错误是由于Highcharts Drilldown模块的导入/初始化方式不符合Angular 19的ES模块解析规则导致的，结合你使用的版本（highcharts@12.1.2 + highcharts-angular@4.0.1），可以按以下步骤修复：

1. 调整模块导入与初始化代码 #

将组件中Drilldown模块的导入和初始化逻辑修改为以下形式：

import {Component, OnInit} from '@angular/core';
import * as Highcharts from 'highcharts';
// 改为通配符导入模块
import * as Drilldown from 'highcharts/modules/drilldown';
import { HighchartsChartModule } from "highcharts-angular";

// 显式调用default方法完成模块初始化
Drilldown.default(Highcharts);

@Component({
  selector: 'app-drilldown-chart',
  imports: [HighchartsChartModule],
  templateUrl: './drilldown-chart.component.html',
  styleUrl: './drilldown-chart.component.scss'
})
export class DrilldownChartComponent implements OnInit {
    ngOnInit(): void {
        this.loadChart()
    }

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

    loadChart(): void {
        this.chartOptions = {
            chart: { type: 'pie' },
            title: { text: 'Drilldown示例图表' },
            // 主系列配置，需包含drilldown关联字段
            series: [{
                name: '主分类',
                data: [
                    { name: '分类A', y: 60, drilldown: 'catA' },
                    { name: '分类B', y: 40, drilldown: 'catB' }
                ]
            }],
            // 钻取子系列配置，id需与主系列的drilldown字段对应
            drilldown: {
                series: [
                    { id: 'catA', data: [['子项A1', 35], ['子项A2', 25]] },
                    { id: 'catB', data: [['子项B1', 20], ['子项B2', 20]] }
                ]
            }
        };
    }
}

2. 验证Drilldown配置完整性 #

确保chartOptions包含完整的钻取结构：

• 主系列的每个数据项必须指定drilldown字段，值对应子系列的id
• drilldown.series数组中的每个子系列必须有唯一id，并包含对应的数据集合

原因说明 #

Angular 19对ES模块的解析规则更严格，Highcharts部分模块采用CommonJS格式导出，直接调用导入的模块函数无法匹配到正确的初始化逻辑，需要显式调用.default来获取真正的模块初始化方法。

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