Can't bind to 'leafletMarkerCluster' since it isn't a known property of 'div'

Question

I'm using ngx-leaflet-markercluster in an angular 5 application. I changed my code according to the demo but still getting the following error:

Can't bind to 'leafletMarkerCluster' since it isn't a known property of 'div'.

Any ideas? Has somebody tried v1.0.0?

Answer 1

Make sure to import the LeafletMarkerclusterModule into the appropriate module of your application (similar to what you do with the ngx-leaflet module). This error is usually caused by Angular not being aware of the directives because the module has not been imported.

For example, make sure the module in which you're using ngx-leaflet and ngx-leaflet-markercluster looks something like the following:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,

        LeafletModule.forRoot(),
        LeafletMarkerClusterModule.forRoot()
    ],
    declarations: [
        MyComponent
    ],
    exports: [
        MyComponent
    ],
    bootstrap: [ MyComponent ],
    providers: [ ]
})
export class MyModule { }