ERROR TypeError: a.markerClusterGroup is not a function

I am currently using asymmetrik's ngx-leaflet and ngx-leaflet-markercluster with the following versions:

"@asymmetrik/ngx-leaflet": "^5.0.2",
"@asymmetrik/ngx-leaflet-markercluster": "^2.1.1"


During development everything is fine. However, when I build the angular project for production (ng serve --prod), I am not able to see the cluster markers and I get the following error in Chrome's console:

ERROR TypeError: a.markerClusterGroup is not a function
at t.ngOnInit (main-es2015.94505399b2d83c23de95.js:1)
at main-es2015.94505399b2d83c23de95.js:1
at main-es2015.94505399b2d83c23de95.js:1
at Kb (main-es2015.94505399b2d83c23de95.js:1)
at xw (main-es2015.94505399b2d83c23de95.js:1)
at Object.updateDirectives (14-es2015.a3c30690716486447af1.js:1)
at Object.updateDirectives (main-es2015.94505399b2d83c23de95.js:1)
at Xb (main-es2015.94505399b2d83c23de95.js:1)
at rw (main-es2015.94505399b2d83c23de95.js:1)
at nw (main-es2015.94505399b2d83c23de95.js:1)


I am importing 'leaflet' and 'leaflet.markercluster' in my component. Below is the map.component.ts code:

import { Component, Input, SimpleChanges } from '@angular/core';
import { tileLayer, latLng, control, marker, divIcon, LatLngBounds, MarkerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';

import { NgElement, WithProperties } from '@angular/elements';

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

@Component({
selector: 'map',
styleUrls: ['./map.component.scss'],
templateUrl: './map.component.html'
})
export class MapComponent {

layers = [];
markerClusterGroup: L.MarkerClusterGroup;
markerClusterData: any[] = [];
maxBounds: L.LatLngBounds;
map: L.Map;

options = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }),
],
zoom: 2,
zoomControl: false,
maxZoom: 18
};

markerClusterOptions: L.MarkerClusterGroupOptions = {
showCoverageOnHover: true,
animate: true,
chunkedLoading: true,
zoomToBoundsOnClick: true,
spiderfyOnMaxZoom: true,
chunkDelay: 500,
animateAddingMarkers: true,
chunkInterval: 7,
iconCreateFunction: function (cluster) {
var markers = cluster.getAllChildMarkers();
var icon = divIcon({
iconSize: [35, 35],
iconAnchor: [10, 10],
popupAnchor: [10, 0],
shadowSize: [0, 0],
html: '<div>' + cluster.getChildCount() + '</div>'
});

if (markers.find(x => x.options.alt == enum.A)) {
icon.options.className = 'cluster cluster-critical';
} else if (markers.find(x => x.options.alt == enum.B)) {
icon.options.className = 'cluster cluster-warning';
} else {
icon.options.className = 'cluster cluster-normal';
}

return icon;
}
};

ngOnChanges(changes: SimpleChanges): void {
this.fixMap();
}

mapReady(map: L.Map) {
this.map = map;
map.addControl(control.zoom({ position: 'bottomright' }));
this.fixMap();
}

fixMap() {
if (this.map) {
this.setBounds();
this.map.fitBounds(this.maxBounds);
this.initMarkers();
setTimeout(() => {
this.map.invalidateSize();
}, 0);
}
}

markerClusterReady(group: L.MarkerClusterGroup) {
this.markerClusterGroup = group;
this.markerClusterGroup.addLayers(this.markerClusterData);
}

initMarkers() {
this.markerClusterData = [];
this.objectList.forEach(x => {
var location = latLng(x.location.latitude, x.location.longitude);
var system = marker(location, {
icon: divIcon({
iconSize: [30, 30],
iconAnchor: [10, 10],
popupAnchor: [10, 0],
shadowSize: [0, 0],
className: this.getMarkerStyle(x),
}),
title: x.serialNumber,
alt: x.objectStatusSummary.status
});

system.bindPopup(fl => this.createPopupComponent(x), {
className: 'popup',
closeButton: false
}).on('click', (data) => {
this.focusOnMarker(x);
});

this.markerClusterData.push(system);
});
}

focusOnMarker(object: Object) {
var bounds = new L.LatLngBounds([[object.objectLocation.latitude, object.objectLocation.longitude]]);
this.map.fitBounds(bounds, {
animate: true,
duration: 1,
easeLinearity: 1,
maxZoom: this.map.getZoom(),
noMoveStart: true
});
}

setBounds() {
var latLngArray: any[] = [];
if (this.objectList && this.objectList.length > 0) {
this.objectList.forEach(x => {
latLngArray.push({
lat: x.objectLocation.latitude,
lng: x.objectLocation.longitude,
});
});
}
else {
latLngArray.push({
lat: 0,
lng: 0
});
}
this.maxBounds = new L.LatLngBounds(latLngArray);
}

getMarkerStyle(object: object) {
return 'marker marker-' + this.businessHelper.getClassByStatus(<objectHealthStatusEnum>object.objectStatusSummary.status) + ' marker-' + object.serialNumber;
}

resetZoom() {
this.map.fitBounds(this.maxBounds, {
animate: true,
duration: 1,
easeLinearity: 1,
noMoveStart: true
});
}

public createPopupComponent(object) {
const popupEl: NgElement & WithProperties<MapPopupComponent> = document.createElement('popup-element') as any;
popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
popupEl.object = object;
document.body.appendChild(popupEl);
return popupEl;
}
}


This is the map.component.html code:

<div class="map-wrapper">
<div
leaflet
[leafletOptions]="options"
(leafletMapReady)="mapReady($event)"

[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
(leafletMarkerClusterReady)="markerClusterReady($event)"
></div>
</div>


You can find the main code here.

Any ideas?

Continue reading...