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.

Answer 1

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};