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

Question

I know this is an issue that comes up here often and is fixed by fixing import statements. I currently have

import { LeafletModule } from 'node_modules/@asymmetrik/ngx-leaflet';
import * as L from 'leaflet';
import { } from '@types/leaflet';

I am referencing options and as such:

options = {
    layers: [
        this.googleHybrid
    ],
    zoom: 1.49,
    zoomSnap: 0,
    center: L.latLng([180, -180])}

I feel like I am running into this issue because of importing everything from leaflet as L. Any thoughts?

Edit: I should also add that this is only coming up in testing.

score 6 · Answer 1 · answered Apr 19 '18 at 18:52

This happens when Angular.io hasn't properly loaded the LeafletModule into your application. Usually, you'd do the following:

First, Import LeafletModule into your application module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LeafletModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And then, if you are using ngx-leaflet in a sub module of the application module, you need to import it into that one too:

import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';

@NgModule({
  declarations: [
  ],
  imports: [
    LeafletModule
  ],
  providers: []
})
export class MyModule { }

There's a tutorial that address how to get up and running with Angular CLI, but it doesn't address the situation where you have sub modules of the application module using ngx-leaflet.

A couple other notes:

It would be unusual for you to need to provide the path into node_modules when you import LeafletModule. Most build pipelines will dereference packages automatically.
The same goes for the @types/leaflet import. Most build pipelines will automatically pull in type information if needed.
It's perfectly valid to do import * as L from 'leaflet'; You can also import specific items as needed e.g., import Map from {leaflet};

I just confirmed that I did all of that and I am still getting the error for some reason. I appreciate the notes as they do help as well. — wvarner, Apr 19 '18 at 19:48
I should also bring up the fact that this is only coming up in testing. Just edited my post. — wvarner, Apr 19 '18 at 19:58
In `ngx-leaflet@7`, the `forRoot()` has been removed. Also ensure that modules are configured correctly, I made the error of trying to have the modules in a different folder to app. — Dennis, Apr 23 '20 at 12:57

score 1 · Answer 2 · answered Dec 02 '20 at 14:10

1

I had the same problem with the tests, but when I added:

imports: [
  LeafletModule,
  LeafletMarkerClusterModule
]

the problem disappeared.

answered Dec 02 '20 at 14:10

Emil Aleksandrov

11
1

score 1 · Answer 3 · edited Feb 04 '23 at 10:31

1

This problem occurs when your map is used in a custom module.

I suggest you try to import your custom module into the application module.

example image

edited Feb 04 '23 at 10:31

Tyler2P

2,324
26
22
31

answered Feb 02 '23 at 14:45

Famouse

13
3

score 0 · Accepted Answer · answered Apr 19 '18 at 20:20

0

I fixed it. I didn't add the proper imports to my test configuration file for the parent component. All good now!

answered Apr 19 '18 at 20:20

wvarner

116
2
7

2

Can you add the part you were missing in the test ? I'm running into the same problem as well – ethanfar Nov 13 '19 at 17:32

score 0 · Answer 5 · answered Dec 30 '21 at 21:34

0

If it helps anyone I got this when I didn't put my new MapComponent into the declarations in app.module.ts (with ngx-leaflet otherwise imported correctly).

answered Dec 30 '21 at 21:34

Matt Lyons-Wood

931
11
17

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

5 Answers5