我试图将一个打字稿传单库导入我的角度2应用程序.
这是我的地图组件.我用tsd install安装了leaflet.d.ts,我的应用程序没有抱怨///< reference path =“../../ typings / leaflet / leaflet.d.ts”/>但是当我尝试使用L.map,它是leaflet.d.ts中的导出模块时,我得到错误“ReferenceError：L未定义”.这是我第一次尝试在角度2中导入外部打字稿库,显然我做错了.
/// <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
{
"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","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"
}
}
}
谁能告诉我我做错了什么？
谢谢！
解决方法
@H_403_34@ 您需要包含传单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';
看到这个plunkr：http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.
