'L'代表UMD全局-编译错误 [英] 'L' refer to a UMD global - compilation error

问题描述

我在项目中使用了插件 ngx-leaflet 和 github .

我确实删除了要编译的模块atm，但是我需要一种解决方法.

这是我使用的package.json:

---

这是我组件内的代码，'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]),
  };
}

这里是将模块导入到我的项目中:

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

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

export class SharedElementModule { }

解决方案

您在组件顶部缺少L的导入.像这样:

import * as L from 'leaflet';

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

解决方案

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

import * as L from 'leaflet';

这篇关于'L'代表UMD全局-编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！