角度2-导入外部传单typescript库

我正在尝试将typescript传单库导入angular 2应用程序

这是我的地图组件。我在tsd安装中安装了Loople.d.ts，我的应用程序没有抱怨

//

，但当我尝试使用Loople.d.ts中导出模块的L.map时，我收到错误“ReferenceError:L未定义”。这是我第一次尝试在angular 2中导入外部typescript库，显然我做错了什么

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
import { Component } from 'angular2/core';
@Component({
  selector: 'map',
  template: `
        <div id="map"></div>
  `,
})
export class Map{
    constructor(){
          var map = new L.Map('map', {
             zoomControl: false
         });
    }

tsd.json

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "leaflet/leaflet.d.ts": {
      "commit": "1da639a106527e0c4010b354a1efe52a3059a291"
    }
  }
}

谁能告诉我我做错了什么

---

谢谢

您需要包括传单JS文件：

System.config({
  map: {
    leaflet: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  },
  packages: {'app': {defaultExtension: 'ts'}} 
});
System.import('app/main')
        .then(null, console.error.bind(console));

然后，您可以通过以下方式将其导入模块：

import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';

---

请参阅以下内容：。

我可以建议您一种解决方法，直到angular cli获得对第三方LIB的更好支持。这对我很有效：）

首先转到项目目录并键入

npm install leaflet --save

然后打开angular-cli-build.js并添加此行

vendorNpmFiles: [
   ..................
   'leaflet/**/*.js',
    ....................
  ]

现在打开src/system-config.ts，编写

const map:any ={
     ..................
   'leaflet': 'vendor/leaflet/dist',
    ....................

}

及

打开src/index.html，添加以下内容

 <script type="text/javascript" src="vendor/leaflet/dist/leaflet.js"></script>

多田！！您的地图已加载：同时，正在呼叫

npm install @types/leaflet@latest --save

并将源代码包含在index.html中

不需要其他导入或声明。然后，导入可能看起来像

import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";

---

另外，映射初始化应该在

ngOnInit（）

中进行，构造函数的使用并不是为了逻辑。

我必须做一些更改，以使Thierry Templier的答案能够使用systemjs和Angular 2.4

正如他所说，我将传单添加到我的system.config.js文件中，但在我的组件中，我必须以这种方式导入它：

import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';

import*作为“传单”的L

然后在我的MapComponent中识别出L类

export class MapComponent {
    let map = L.map("map").setView([38, -77], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
    }

导出类映射组件{
设map=L.map（“map”）.setView（[38，-77]，13）；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
}
我相信您还需要将传单.js连接到您的页面。d、 ts文件只用于告诉TypeScript一些JS代码，d.ts不会导入实际代码。好的。我已经在我的项目的文件夹中找到了传单js文件。您知道如何将ts文件连接到此文件夹吗？如果正在使用，您可以使用tag或dependency manager。如何将其添加到angular cli配置文件中？正如您所提到的，我已经添加了系统配置，但是导入传单找不到模块。同上。想要一些关于如何使用angular cli和webpack的信息。我猜你想在地图数组中写“传单”：“供应商/传单/dist”，对吗？这应该是--save dev？@chrismarx我不知道，应该吗？它不是一个开发工具，而是一个实际的应用程序代码，所以我想不是，类型只对开发有用，类型在使用angular CLI进行转换时消失了，我仍然需要添加
declare var L:any或
ng serve
打印
找不到名称“L”
-我缺少什么吗？
npm install @types/leaflet@latest --save

import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";

export class MapComponent {
    let map = L.map("map").setView([38, -77], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
    }