typescript - 如何将 leaflet-routing-machine 包含到 angular 2 typescript webpack 应用程序中

Question

我使用这个种子开始使用 Angular 2 Typescript 和 Webpack:https://github.com/haoliangyu/angular2-leaflet-starter .

我对大多数使用的工具和技术(Angular 2、Typescript、Webpack)都不熟悉。虽然我越来越了解这些，但我似乎仍然没有掌握如何包含第三方非类型化 JS 库:

我想包括 leaflet-routing-machine.js进入我的项目。据我所知，虽然传单确实存在类型，但传单路由机不存在类型。

我通过 npm install 安装了包并添加了所需的 quick-start code snipped显示路线。

ma​​p.service.ts

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>

import {Injectable} from 'angular2/core';
import {Map} from 'leaflet';

Injectable()
export class MapService {
  map: Map; // holds reference to the normal leaflet map object

  showRoute(){
        L.Routing.control({
        waypoints: [
            L.latLng(47.569198, 7.5874886),
            L.latLng(47.5685418, 7.5886755)
        ]
    }).addTo(this.map);

  }

}

我在 npm start 上得到的错误是:

ERROR in ./app/services/map.service.ts
(56,11): error TS2339: Property 'Routing' does not exist on type 'typeof L'.

据我所知，我不应该在 index.html 中包含 JS 文件，因为这应该由 webpack 自动完成。除了我通常不确定如何在不输入的情况下包含第三方库这一事实(this 之类的答案没有帮助)，我的情况似乎有点不同，因为 L 对象是标准的传单并且不知道 Routing 属性。我以某种方式理解这一点，因为我看不到路由机器库如何扩展传单库。

有什么建议吗？

Answer 1

我既没有使用过 Angular 2，也没有使用过 TypeScript，但我怀疑 TypeScript 不喜欢 LRM 将自身附加到 L 对象/命名空间。

请注意，LRM 还将自身导出为普通的 CommonJS 模块，因此您可以执行类似的操作而不是使用 L.Routing.Control:

var L = require('leaflet');
var Routing = require('leaflet-routing-machine');

var map = L.map(...);
var routingControl = Routing.control({ ... });