Angular 2-导入外部传单打字稿库 [英] Angular 2 - import of external leaflet typescript library

问题描述

我正在尝试将一个打字稿传单库导入到我的angular 2应用程序中.

Im trying to import the a typescript leaflet library into my angular 2 application.

这是我的地图组件.我已经用tsd install安装了leaflet.d.ts，我的应用程序没有抱怨/// <reference path="../../typings/leaflet/leaflet.d.ts"/>，但是当我尝试使用L.map(它是leaflet.d.ts中的导出模块)时，出现错误"ReferenceError:L is没有定义的".这是我第一次尝试在angular 2中导入外部打字稿库，显然我做错了什么.

This is my map component. Ive installed leaflet.d.ts with tsd install and my application does not complain about /// <reference path="../../typings/leaflet/leaflet.d.ts"/> but when i try to use a L.map which is a exported module in leaflet.d.ts i get the error "ReferenceError: L is not defined". This is the first time i try to import a external typescript library in angular 2 and clearly im doing something wrong.

/// <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
         });
    }

package.json

package.json

{
  "dependencies": {
    "angular2": "^2.0.0-beta.3",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "normalize.css": "^3.0.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.6",
    "typings": "^0.6.4",
    "zone.js": "^0.5.11"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "gh-pages": "^0.11.0",
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-sass": "~0.9.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-shell": "^1.2.1",
    "lite-server": "^2.0.1",
    "normalize.css": "^3.0.3",
    "typescript": "^1.7.5"
  },
  "scripts": {
    "publish": "node publish.js",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }
}

tsd.json

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

有人可以告诉我我在做什么错吗?

Could anyone tell me what I am doing wrong?

谢谢！

推荐答案

您需要包括传单JS文件:

You need to include the leaflet JS file:

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));

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

Then you can import it in your modules this way:

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

请参阅以下示例: http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview .

这篇关于Angular 2-导入外部传单打字稿库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！