Angular 18中无法扩展Highcharts Exporting模块的问题求助

问题概述 #

将项目从Angular 14升级到Angular 18后，Highcharts（v12）的导出功能（PNG/JPEG/XLSX等）失效，报错：

highcharts_modules_exporting__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

原扩展代码：

import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
Exporting(Highcharts);

解决方案 #

方案1：调整模块导入与初始化方式 #

Angular 18默认使用ESBuild打包器，对ES模块解析更严格。Highcharts v12的模块导出格式需要适配这种解析规则，修改导入代码如下：

import Highcharts from 'highcharts';
import * as Exporting from 'highcharts/modules/exporting';

// 调用模块的default初始化函数
Exporting.default(Highcharts);

或者使用命名导入方式：

import Highcharts from 'highcharts';
import { exporting } from 'highcharts/modules/exporting';

exporting(Highcharts);

方案2：配置TypeScript编译选项 #

在项目根目录的tsconfig.json中，确保启用以下编译选项，让TypeScript正确处理CommonJS模块的默认导入：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 保留其他原有配置...
  }
}

修改完成后重启Angular开发服务，确保配置生效。

方案3：正确使用angular-highcharts包装器 #

如果选择使用angular-highcharts，需遵循官方最新配置方式：

1. 安装依赖：

npm install highcharts angular-highcharts

2. 在AppModule中导入模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartModule } from 'angular-highcharts';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件中初始化导出模块并创建图表：

import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting';

// 初始化导出模块
exporting(Chart.Highcharts);

@Component({
  selector: 'app-root',
  template: `<div [chart]="chart"></div>`
})
export class AppComponent {
  chart = new Chart({
    title: { text: '示例图表' },
    series: [{ type: 'line', data: [1, 3, 2] }],
    // 显式启用导出功能
    exporting: { enabled: true }
  });
}

原因分析 #

Angular 18升级后，默认打包器切换为ESBuild，其对ES模块的解析规则比旧版Webpack更严格。原代码中的默认导入方式无法正确识别Highcharts模块的初始化函数，导致调用时出现"不是函数"的错误。通过调整导入方式或配置TypeScript编译选项，可让模块加载逻辑适配新的打包环境。

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