“L"指的是 UMD 全局 - 编译错误 [英] 'L' refer to a UMD global - compilation error

问题描述

我在我的项目中使用了插件

问题是当我尝试编译时出现以下错误:

编译:

ng serve --aot

这里的上下文:

<小时>

我确实尝试使用 :

以不同方式导入 L

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

但我在文档和

<小时>

这是我的组件中的代码，'L' 的用户:

@Component({选择器:'app-map-screens-element',templateUrl: './map-screens-element.component.html',样式网址:['./map-screens-element.component.scss',],})导出类 MapScreensComponent 实现 OnInit {/*** 设置地图选项*/公共 $mapOptions = {//我们使用图层 openstreetmap层数:[L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),],变焦:15，中心:L.latLng([48.866667, 2.333333]),};}

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

import { LeafletModule } from '@asymmetrik/ngx-leaflet';@NgModule({进口:[传单模块，],声明: [//...],出口:[//...],})导出类 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屋！