我正试图将一个typescript传单库导入到我的angular 2应用程序中。
这是我的地图组件。我用tsd安装了leaflet.dts,我的应用程序没有抱怨/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
,但当我尝试使用leaflet.d.ts中导出的模块L.map时,我得到了错误"ReferenceError:L未定义"。这是我第一次尝试在angular 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
});
}
软件包.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"
}
}
}
有人能告诉我我做错了什么吗?
谢谢!
您需要包含传单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.
我可以建议您一个解决方法,直到angular cli更好地支持第三方libs。它对我有效:)
首先转到项目目录并键入
npm install leaflet --save
然后打开angular-cli-build.js并添加这行
vendorNpmFiles: [
..................
'leaflet/**/*.js',
....................
]
现在打开你的src/system-config.ts,写
const map:any ={
..................
'leaflet': 'vendor/leaflet/dist',
....................
}
和
const packages: any = {
'leaflet': {
format: 'cjs'
}
};
打开你的src/index.html,添加这个
<script type="text/javascript" src="vendor/leaflet/dist/leaflet.js"></script>
不要忘记添加css文件也
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
现在打开您想要使用传单的组件
declare let L: any;
@Component({
moduleId: module.id,
selector: 'app-map',
templateUrl: 'map.component.html',
styleUrls: ['map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
leafletMap: any;
ngAfterViewInit() {
this.leafletMap = L.map("map").setView([23.709921, 90.407143], 7);
}
}
Tada!!您的地图已加载:D
为了让Thierry Templier的答案能够使用systemjs和Angular 2.4,我不得不做一些更改。
正如他所说,我在system.config.js文件中添加了传单,但在我的组件中,我不得不以这种方式导入:
import * as L from 'leaflet';
然后L类在我的MapComponent 中被识别
export class MapComponent {
let map = L.map("map").setView([38, -77], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
同时,您所要做的一切都是调用
npm install @types/leaflet@latest --save
并将源代码包含在index.html.中
无需其他进口或申报。然后,进口可能看起来像
import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";
此外,映射初始化应该在ngOnInit()
中进行,构造函数的使用不适用于逻辑。