'L' 指的是 UMD 全局 - 编译错误

Question

我在我的项目中使用插件ngx-leaflet 和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 克隆到一个新的空项目后，我通过 NPM 添加了 sockjs-client。然后我尝试像这样在 NG-Service 中创建一个 SockJS 实例。 SockJs 只是一个不兼容角度的 npm 包的示例：

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

编译正常，但运行时错误提示

SockJS 不是构造函数

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

'SockJS' 指的是一个 UMD 全局，但当前文件是一个模块。 考虑改为添加导入。

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

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