'L' refer to a UMD global - compilation error

Question

I am using in my project the plugin ngx-leaflet, and angular-cli.

I am trying to use leaflet as described in the doc, for example :

The problem is when I'm trying to compile I got the following error :

Compiled with :

ng serve --aot

Context here :

---

I did try to import L in different ways using :

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

But I cannot find anything in documentation nor the github.

I did remove the module atm to compile, but I need a workaround.

Here is the package.json that I use:

---

Here is the code inside my component, user of 'L' :

@Component({
  selector: 'app-map-screens-element',
  templateUrl: './map-screens-element.component.html',
  styleUrls: [
    './map-screens-element.component.scss',
  ],
})

export class MapScreensComponent implements OnInit {
  /**
   * setting map options
   */
  public $mapOptions = {
    // we use the layer openstreetmap
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
    ],
    zoom: 15,
    center: L.latLng([48.866667, 2.333333]),
  };
}

And here the import of the module into my project :

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

@NgModule({
  imports: [
    LeafletModule,
  ],
  declarations: [
    // ...
  ],
  exports: [
    // ...
  ],
})

export class SharedElementModule { }

Answer 1

You are missing the import of L on top of you component. Like so:

import * as L from 'leaflet';