'L' 引用 UMD 全局 - 编译错误

Question

我在我的项目中使用插件 ngx-leaflet, and angular-cli。

我正在尝试按照文档中的描述使用传单，例如：

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

编译：

ng serve --aot

上下文在这里：

我确实尝试使用 :

以不同的方式导入 L

import { LeafletModule } from '@asymmetrik/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 { }

Answer 1

您缺少在组件之上导入 L。像这样：

import * as L from 'leaflet';

Answer 2

将 angular-cli 克隆到一个新的空项目后，我添加了 sockjs-client 通过 NPM。然后我尝试像这样在 NG-Service 中创建一个 SockJS 实例。 SockJs 只是 none angular 兼容 npm 包的示例：

import { SockJS } from 'sockjs-client';
//...
private socket: SockJs;
//...
this.socket = new SockJS(this.serverURI);

编译正常，但出现运行时错误

SockJS is not a constructor

经过一些谷歌搜索后，我偶然发现了 angular 中的输入，以使 js 类型可用于打字稿转译器 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html。为了让它工作，我必须通过从 NPM 安装 @types/sockjs-client 来添加类型。产生了编译器错误

'SockJS' refers to a UMD global, but the current file is a module. Consider adding an import instead.

此错误意味着类型为 typescript 转译器已知，但未显式导入。您必须导入类型以明确告诉打字稿您知道您正在使用外部脚本，在编译时打字稿无法验证其存在。该包的存在只会在运行时检查。显式导入语句如下所示

import * as SockJsClient from 'sockjs-client';
//...
private socket: SockJsClient.Socket;
//...
this.socket = new SockJsClient(this.serverURI);

'L' 引用 UMD 全局 - 编译错误

'L' refer to a UMD global - compilation error

typescript

webpack

angular-cli

angular

ngx-leaflet