typescript Angular 2 - 导入外部传单打字稿库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36375749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - import of external leaflet typescript library
提问by Jakob Svenningsson
Im trying to import the a typescript leaflet library into my angular 2 application.
我正在尝试将打字稿传单库导入我的 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.
这是我的地图组件。我已经使用 tsd install 安装了 Leaflet.d.ts 并且我的应用程序没有抱怨/// <reference path="../../typings/leaflet/leaflet.d.ts"/>但是当我尝试使用 L.map 它是leaflet.d.ts 中的导出模块时我收到错误“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
});
}
package.json
包.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
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?
谁能告诉我我做错了什么？
Thanks!
谢谢！
采纳答案by Thierry Templier
You need to include the leaflet JS file:
您需要包含传单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));
Then you can import it in your modules this way:
然后你可以通过这种方式将它导入到你的模块中：
import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';
See this plunkr: http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.
请参阅此 plunkr：http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview 。
回答by pd farhad
I can suggest you a workaround until angular-cli get better support for 3rd party libs. It worked for me :)
我可以建议你一个解决方法，直到 angular-cli 获得对 3rd 方库的更好支持。它对我有用:)
First go to the project directory and type
首先进入项目目录并输入
npm install leaflet --save
then open your angular-cli-build.js and add this line
然后打开你的 angular-cli-build.js 并添加这一行
vendorNpmFiles: [
..................
'leaflet/**/*.js',
....................
]
now open your src/system-config.ts, write
现在打开你的 src/system-config.ts，写
const map:any ={
..................
'leaflet': 'vendor/leaflet/dist',
....................
}
and
和
const packages: any = {
'leaflet': {
format: 'cjs'
}
};
Open your src/index.html, add this
打开你的 src/index.html，添加这个
<script type="text/javascript" src="vendor/leaflet/dist/leaflet.js"></script>
and dont forget to add the css file also
并且不要忘记添加css文件
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
Now open your component where you want to use Leaflet
现在打开您要使用 Leaflet 的组件
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!! your map loaded :D
多田！！您的地图已加载：D
回答by phil294
Meanwhile, everything you have to dois calling
同时，你所要做的就是打电话
npm install @types/leaflet@latest --save
and including the source in index.html.
并将源代码包含在 index.html 中。
No other imports or declarations needed. Then, the import could look like
不需要其他导入或声明。然后，导入可能看起来像
import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";
Also, map initialization should happen in ngOnInit(), constructor usage is not meant for logic.
此外，映射初始化应该发生在ngOnInit()，构造函数的使用并不意味着逻辑。
回答by jm22
I had to make some changes to get Thierry Templier's answer to work using systemjs and Angular 2.4.
我必须进行一些更改才能使用 systemjs 和 Angular 2.4 获得 Thierry Templier 的答案。
I added Leaflet to my system.config.js file just as he states, but in my component I I had to import it this way:
正如他所说的那样，我将 Leaflet 添加到我的 system.config.js 文件中，但在我的组件 II 中必须以这种方式导入它：
import * as L from 'leaflet';
import * as L from 'leaflet';
and then the L class was recognized in my MapComponent
然后在我的 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
