Leaflet MarkClusterGroup isn't working Angular 18

When I upgraded my app from NG16 to NG 18 (and typescript 5.4) and to Leaflet 1.9.4 and using Leaftlet.markercluster 1.5.3, the call to L.markerClusterGroup now fails. It compiles fine but when run it says that L.markerClusterGroup is not found. The previous version of my app used Leaflet 1.7.1 and Leaftlet.markercluster 1.5.3. Below is the error I get when running the new app.



I notice when using the dev tools in chrome that the "L" object is different. It's a module in the NG16 version of my app but in NG18 it appears to be a class. I tried reverting Leaflet to 1.7.1 in my NG18 app and it had the same behavior (as if it were a class).

In my component's code I have the following imports

import L from 'leaflet';
import 'leaflet.markercluster';


This is the same for both versions of my app and the following call to create a marker cluster group (the same in both versions):

const openMarkerCluster = L.markerClusterGroup({
iconCreateFunction: (cluster: { getChildCount: () => any }): L.DivIcon =>
L.divIcon({
html: `<i class="fas fa-flag" style="font-size: 1.50rem">${cluster.getChildCount()}</i>`,
className: 'divIcon'
})
});


When I debug and look at the L object this is what the new code results in (it's the same if I revert the leaflet version back to 1.7.1):



When debugging the NG16 version I get this:



Now that I think about it, I wonder if the new Angular build engine is compiling it differently.

Continue reading...