L.markerClusterGroup is not a function - Angular Directives not worked

[keved93]

Description: I followed all the necessary steps to install ngx-leaflet and ngx-leaflet-markercluster to implement a map with marker clustering in my Angular application. Despite the correct installation and configuration, I keep encountering the following error in the console:

ERROR TypeError: L.markerClusterGroup is not a function at _LeafletMarkerClusterDirective.ngOnInit

Environment:

• Angular 18 (simple installation without SSR/Hydration)
• ngx-leaflet and ngx-leaflet-markercluster installed as described in the documentation.

Code Setup:
app.component.ts

import { Component, OnInit } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import { LeafletMarkerClusterModule } from '@bluehalo/ngx-leaflet-markercluster';
import * as L from 'leaflet';
import 'leaflet.markercluster';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    LeafletModule,
    LeafletMarkerClusterModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit{
  options: L.MapOptions = {
    center: [51.505, -0.09],
    zoom: 13,
    layers: [
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
      })
    ]
  };
  markerClusterData: L.Marker[] = [];
  markerClusterOptions!: L.MarkerClusterGroupOptions;

  ngOnInit(): void {
    this.initializeMarkers();
  }

  private initializeMarkers(): void {
    const markerLocations = [
      [51.505, -0.09],
      [51.515, -0.1],
      [51.525, -0.11],
      [51.535, -0.12],
      [51.545, -0.13],
      [51.555, -0.14],
      [51.565, -0.15],
      [51.575, -0.16],
      [51.585, -0.17],
      [51.595, -0.18]
    ];

    const markerClusterGroup:any = L.markerClusterGroup(this.markerClusterOptions);
    
    markerLocations.forEach((location:any) => {
      const marker = L.marker(location);
      markerClusterGroup.addLayer(marker);
    });

    this.markerClusterData = [markerClusterGroup];
  }
}

app.component.html

<div
  style="width: 100%; height: 400px;"
  leaflet
  [leafletOptions]="options"
  [leafletMarkerCluster]="markerClusterData"
  [leafletMarkerClusterOptions]="markerClusterOptions"
></div>

Problem: When trying to load the map with marker clusters using Angular directives, the error L.markerClusterGroup is not a function at _LeafletMarkerClusterDirective.ngOnInit is thrown. This prevents the map from rendering correctly with clusters.

Workaround: The only workaround that seems to avoid this issue is to directly initialize the map using an ID for the map container:

this.map = L.map('id_of_target_div_without_angular_directives', this.options);

However, this approach bypasses the Angular directives, which is not ideal.

Workaround: Is there a way to use ngx-leaflet-markercluster with Angular directives without encountering this error?

[keved93]

temporary solution from another closed issue without markercluster angular directives:
#88 (comment)