angular - '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 transpiler 已知类型但未显式导入。您必须导入类型以明确告诉 typescript 您知道您正在使用外部脚本，该脚本在编译时无法通过 typescript 验证其存在。该包的存在只会在运行时检查。显式导入语句如下所示

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