Angular TiledWebMap with Providers

I am trying to use OpenStreetMap with Highcharts to create a TiledWebMap (TWM) in Angular20 standalone project but the TiledWebMap is loading but not importing.

ENVIROMENT

1. Angular 20.0.3
2. Highcharts 12.3.0
3. Highcharts-Angular 5.1.0

SETUP

There appears to be two ways to setup TiledWebMaps, but neither of them works - method 1 doesn't compile and method two doesn't register TiledWebMaps:

1)

The first is described as manual mode in the component, for example:

map-test.ts

import HC_map from 'highcharts/modules/map';
import TiledWebMap from 'highcharts/modules/tiledwebmap';

HC_map(Highcharts);
TiledWebMap(Highcharts);


If I attempt to load TiledWebMap in this way I get error:

✘ [ERROR] TS2349: This expression is not callable.
Type 'typeof import("/home/frontend/node_modules/highcharts/highcharts")' has no call signatures. [plugin angular-compiler]

src/app/components/map-test/map-test.ts:7:0:
7 │ TiledWebMap(Highcharts);


2)

The second method which the rest of my project uses is ProvidePatrialHighcharts helper.

app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import {provideHighcharts, providePartialHighcharts} from 'highcharts-angular'
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHighcharts(),
provideHttpClient(),
providePartialHighcharts({ modules: () => [
import('highcharts/esm/modules/map'),
import('highcharts/esm/modules/tiledwebmap')
],}),
]
};


PROBLEM

When I add some commands to console log the available registered types in my component with this :

ngOnInit(): void {
const availableSeries = Object.keys((Highcharts as any).seriesTypes || {});
console.log('Available Highcharts series types:', availableSeries);


I get:

[ "line", "area", "spline", "areaspline", "column", "bar", "scatter", "pie", "map", "mapline", "mappoint", "bubble", "mapbubble", "heatmap" ]

Notice TiledWebMap is missing.

QUESTION

Ideally I would like to be able to get both methods to work.

What am I doing wrong in both approaches - bonus points if you can show a stackblitz with method 2 and OpenStreetMaps working.

I am newish to Angular - so if this question is missing information or badly formed please let me know and I will update it.

Continue reading...