Angular 20独立项目中Highcharts TiledWebMap模块导入与注册失败问题求助

你好，看了你在Angular 20独立项目里折腾Highcharts TiledWebMap的问题，刚好之前踩过类似的坑，给你理清楚两种方法的解决办法：

先明确核心问题根源 #

你的环境组合（Angular 20.0.3 + Highcharts 12.3.0 + Highcharts-Angular 5.1.0）中，Highcharts的ES模块导出逻辑和旧版本有差异，不管是手动导入还是用ProvidePartialHighcharts，都需要适配新版本的模块导出规则。

方法1（手动导入模块）的错误修复 #

你遇到的TS2349: This expression is not callable错误，是因为TiledWebMap模块的初始化函数是通过默认导出暴露的，而非直接导出可调用的模块对象。

修改map-test.ts代码如下：

import HC_map from 'highcharts/modules/map';
import TiledWebMapModule from 'highcharts/modules/tiledwebmap';
import * as Highcharts from 'highcharts';

// 先初始化依赖的map模块
HC_map(Highcharts);
// 调用TiledWebMap模块的默认导出初始化函数
TiledWebMapModule.default(Highcharts);

为什么要加.default？因为Highcharts 12.x的模块都把初始化函数放在默认导出里，直接导入的模块对象本身不具备调用签名，必须取它的default属性才能拿到可执行的初始化函数。

方法2（ProvidePartialHighcharts）的错误修复 #

你用providePartialHighcharts没注册成功TiledWebMap，是因为没有正确返回模块的初始化函数，而是返回了模块本身。

修改app.config.ts中的providePartialHighcharts配置：

providePartialHighcharts({
  modules: () => [
    // 先加载依赖的map模块，取出默认导出的初始化函数
    import('highcharts/esm/modules/map').then(module => module.default),
    // 加载TiledWebMap模块，同样取出初始化函数
    import('highcharts/esm/modules/tiledwebmap').then(module => module.default)
  ]
}),

同时，组件里要通过依赖注入获取已注册模块的Highcharts实例，而不是直接导入原始Highcharts：

import { Component, OnInit, Inject } from '@angular/core';
import { Highcharts } from 'highcharts-angular';

@Component({
  selector: 'app-map-test',
  standalone: true,
  template: `<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>`
})
export class MapTestComponent implements OnInit {
  // 注入已初始化好模块的Highcharts实例
  constructor(@Inject(Highcharts) public Highcharts: typeof Highcharts) {}

  chartOptions: Highcharts.Options = {
    chart: {
      type: 'tiledwebmap'
    },
    series: [{
      type: 'tiledwebmap',
      provider: 'OpenStreetMap'
    }]
  };

  ngOnInit(): void {
    const availableSeries = Object.keys((this.Highcharts as any).seriesTypes || {});
    console.log('Available Highcharts series types:', availableSeries);
    // 此时应该能看到'tiledwebmap'出现在列表中
  }
}

这里的关键是：providePartialHighcharts的modules函数需要返回初始化函数数组，而不是模块对象数组，所以要用.then(module => module.default)提取正确的函数。

额外注意事项 #

1. 如果你用TypeScript，建议安装@types/highcharts来获得完整的类型提示：

npm install @types/highcharts --save-dev

2. TiledWebMap依赖Map模块，所以必须先加载Map模块，再加载TiledWebMap模块，顺序不能颠倒
3. Highcharts-Angular 5.1.0确实兼容Highcharts 12.3.0，版本匹配没问题

按照上面的修改，两种方法都能正常工作，其中方法2更符合Angular独立项目的依赖注入设计风格，推荐优先使用。

内容来源于stack exchange