如何在angular 2 typescript网页应用程序中包含传单传送机

我使用此种子开始使用Angular 2 Typescript和Webpack:

我对大多数使用过的工具和技术（Angular 2、Typescript、Webpack）都是新手。虽然我对这些越来越了解，但似乎还没有掌握第三方非类型JS库是如何包含的：

我想在我的项目中包括这个项目。据我所知，虽然传单上确实有打字机，但传单传送机上却没有打字机

我通过

npm install

安装了这个包，并添加了显示路由所需的代码

地图服务.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);

  }

}

据我所知，我不应该在index.html中包含JS文件，因为这应该由webpack自动完成。除了我通常不确定如何在没有打字的情况下包括第三方库这一事实（答案如“没有帮助”）之外，我的情况似乎有所不同，因为

L

对象是标准传单，不知道

路由

属性。我不知怎么地理解了，因为我不知道路由机器库是如何扩展传单库的

---

有什么建议吗？

我既没有使用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({ ... });

---

这是我挣扎了一段时间，但最终得到了它的工作。 以下是导入它的方式：

import*作为“传单”的L；
进口‘传单传送机’

在你的systemjs.config中

   map: {
    'leaflet': 'npm:leaflet/dist/leaflet.js',
}
     packages: {
           leaflet: {
              defaultExtension: 'js'
              }
            }

要在组件中设置布线，请确保将布线添加到地图而不是平铺层

    ngAfterViewInit() {

     var map = new L.Map("map")

    let openmap = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ',
       }).addTo(map);

    let route = L.Routing.control({
        waypoints: [
          L.latLng(40.5663651,-75.6032277),
          L.latLng(40.00195, -76.073299),
          L.latLng(42.3673945,-83.0750408)
        ]
      }).addTo(map);}

ngAfterViewInit（）{
var map=新的L.map（“map”）
让openmap=L.tileLayer（“http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”{
属性：“地图数据©”，
}).addTo（地图）；
让route=L.Routing.control({
航路点：[
L.latLng（40.5663651，-75.6032277），
L.latLng（40.00195，-76.073299），
L.latLng（42.3673945，-83.0750408）
]
}).addTo（map）；}

关于这个问题，我得到了很多信息：
确切地说，Typescript对名称空间不满意。然而，这正是我想要的。为了避免编译时错误，我现在将路由变量声明为any:
var-Routing:any=require（'slipal-Routing-machine'）
    ngAfterViewInit() {

     var map = new L.Map("map")

    let openmap = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ',
       }).addTo(map);

    let route = L.Routing.control({
        waypoints: [
          L.latLng(40.5663651,-75.6032277),
          L.latLng(40.00195, -76.073299),
          L.latLng(42.3673945,-83.0750408)
        ]
      }).addTo(map);}