Bug: Tilemap not rendering with highcharts-angular and providePartialHighcharts

[Stephane-AmStrong]

Bug: Tilemap not rendering with highcharts-angular and providePartialHighcharts

Environment

• highcharts: [your version]
• highcharts-angular: [your version]
• Angular: [your version]
• TypeScript: [your version]

Issue

Tilemap charts configured with providePartialHighcharts are not rendering. Despite importing the tilemap module, we still get Highcharts error highcharts/highcharts#17.

Browser Console Error

line-chart.component.html:1 ERROR Error: Highcharts error highcharts/highcharts#17: www.highcharts.com/errors/17/?missingModuleFor=tilemap
 - missingModuleFor: tilemap
    at Object.<anonymous> (highcharts.js:9:138)
    at U (highcharts.js:9:2580)
    at C (highcharts.js:9:61)
    at a0.initSeries (highcharts.js:9:199588)
    at highcharts.js:9:215527
    at Array.forEach (<anonymous>)
    at a0.firstRender (highcharts.js:9:215505)
    at a0.<anonymous> (highcharts.js:9:199505)
    at U (highcharts.js:9:2580)
    at a0.init (highcharts.js:9:198727)
Promise.then		
SectionApplicationsComponent_For_2_Template	@	section-applications.component.html:5
Promise.then		
(anonymous)	@	main.ts:5

Configuration

Component setup:

import { Component, input } from '@angular/core';
import { ChartConstructorType, HighchartsChartComponent, providePartialHighcharts } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'honeycomb-chart',
  providers: [
    providePartialHighcharts({
      modules: () => [
        import('highcharts/esm/modules/map'),
        import('highcharts/esm/modules/tilemap'),
      ],
    }),
  ],
})
export class HoneycombChartComponent {
  chartConfig = input.required<ChartConfig>();

  get chartOptions(): Highcharts.Options {
    return {
      chart: {
        type: 'tilemap',
        inverted: true,
        height: '80%'
      },
      title: {
        text: this.chartConfig().title,
      },
      xAxis: {
        visible: false,
      },
      yAxis: {
        visible: false,
      },
      colorAxis: {
        dataClasses: [
          {
            from: 0,
            to: 1000000,
            color: '#3b528b',
            name: '< 1M',
          },
          {
            from: 1000000,
            to: 5000000,
            color: '#21918c',
            name: '1M - 5M',
          },
          {
            from: 5000000,
            to: 20000000,
            color: '#5ec962',
            name: '5M - 20M',
          },
          {
            from: 20000000,
            color: '#fde725',
            name: '> 20M',
          },
        ],
      },
      legend: {
        enabled: false,
      },
      tooltip: {
        headerFormat: '',
        pointFormat: 'Population de <b>{point.name}</b>: <b>{point.value}</b>',
      },
      plotOptions: {
        tilemap: {
          tileShape: 'hexagon',
          dataLabels: {
            enabled: true,
            format: '{point.hc-a2}',
            style: {
              textOutline: 'none',
            },
          },
        },
      },
      series: [
        {
          type: 'tilemap',
          name: 'Population',
          data: this.getTilemapData(),
        },
      ],
    };
  }

  private getTilemapData(): any[] {
    return [
      { 'hc-a2': 'CA', name: 'California', x: 5, y: 2, value: 38965193 },
      { 'hc-a2': 'TX', name: 'Texas', x: 7, y: 4, value: 30503301 },
      { 'hc-a2': 'FL', name: 'Florida', x: 8, y: 8, value: 22610726 },
      { 'hc-a2': 'NY', name: 'New York', x: 2, y: 9, value: 19571216 },
      { 'hc-a2': 'IL', name: 'Illinois', x: 3, y: 6, value: 12882135 },
      { 'hc-a2': 'PA', name: 'Pennsylvania', x: 3, y: 8, value: 12801989 },
    ];
  }

  chartConstructor: ChartConstructorType = 'chart';
  updateFlag = false;
  oneToOneFlag = true;
}

Template:

<highcharts-chart
  [options]="chartOptions"
  [(update)]="updateFlag"
  [oneToOne]="oneToOneFlag"
  class="chart">
</highcharts-chart>

Expected Behavior

Tilemap chart renders with hexagonal tiles positioned according to x,y coordinates and colored by value.

Actual Behavior

• Highcharts error highcharts/highcharts#17 thrown: "missingModuleFor=tilemap"
• Chart container appears but remains empty
• Error occurs despite explicit tilemap module import in providePartialHighcharts

Additional Notes

• SeriesTilemapOptions interface exists in highcharts.d.ts, indicating module should be available
• The error suggests the tilemap module is not being loaded properly by providePartialHighcharts
• Error originates from initSeries during chart rendering
• Same tilemap configuration works in vanilla JavaScript/HTML

Steps to Reproduce

1. Create Angular component with tilemap chart
2. Use providePartialHighcharts with tilemap module import
3. Configure tilemap options with type: 'tilemap'
4. Component throws Highcharts error highcharts/highcharts#17 on render

Workaround Attempts

• Tried importing both map and tilemap modules
• Tested different module import paths (/esm/modules/ vs /modules/)
• Used different ChartConstructorType values
• All attempts result in the same error highcharts/highcharts#17

Question

Is providePartialHighcharts properly loading the tilemap module, or is there a specific configuration required for tilemap charts that differs from other module imports?