If Angular.io fails to properly load the LeafletModule into your application, you may encounter this issue. To resolve it, follow these steps:
Start by incorporating 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 { }
If you are using ngx-leaflet in a submodule of the application module, make sure to import it there as well:
import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
@NgModule({
declarations: [
],
imports: [
LeafletModule
],
providers: []
})
export class MyModule { }
A comprehensive tutorial is available on how to set up and use Angular CLI with ngx-leaflet, though it does not cover scenarios involving submodules.
Additional tips:
- You typically don't need to provide the path to node_modules when importing
LeafletModule. Most build pipelines handle package referencing automatically.
- The same applies to importing
@types/leaflet; build pipelines usually fetch type information as needed.
- Using
import * as L from 'leaflet'; is valid. You can also selectively import items like import Map from {leaflet};