我正在使用AngularJs2中的esri和typescript
import esri = require('esri');
import Map = require('esri/map');
import AGSPoint = require("esri/geometry/Point");
import { Component } from 'angular2/core'
@Component({
templateUrl: 'app/home/home.html',
styleUrls: [ 'app/home/home.css' ],
})
export class Home {
map: Map;
contructor() {
this.map = this.createMap();
}
private createMap(): Map {
const point = new Point(-122.45, 37.75); // long, lat
point.log();
const mapOptions: esri.MapOptions = {};
mapOptions.basemap = "topo";
mapOptions.center = point;
mapOptions.zoom = 13;
return new Map("map", mapOptions);
}
}
class Point extends AGSPoint {
log() {
console.log(this.type, this.x, this.y);
}
}我已经正确地安装了类型定义(d.ts文件),并且可以正确地检索它们。
索引文件如下所示
<html>
<head>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Home</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<!-- IE required polyfills, in this exact order -->
<script src="es6-shim/es6-shim.min.js"></script>
<script src="systemjs/dist/system-polyfills.js"></script>
<script src="angular2/bundles/angular2-polyfills.js"></script>
<script src="systemjs/dist/system.src.js"></script>
<script src="rxjs/bundles/Rx.js"></script>
<script src="angular2/bundles/angular2.dev.js"></script>
<script src="angular2/bundles/router.dev.js"></script>
<!-- ArcGIS -->
<script src="//js.arcgis.com/3.15"></script>
<script>
System.config({
// defaultJSExtensions: true,
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app>Loading map...</app>
</body>
</html>关键是,当我执行应用程序时,它不工作。index.html由nodejs提供服务。它把我当成了错误
localhost:3000/esri/map not found我应该如何安装esri modules?应该如何检索它们?
发布于 2016-02-03 09:07:32
为了正确检索模块,我们需要使用SystemJS指令map将esri映射到包的位置,如下所示
System.config({
defaultJSExtensions: true,
map: {
esri: '//js.arcgis.com/3.15/esri'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});现在,程序包被正确检索,但仍然收到另一个错误,指出define不起作用
发布于 2016-02-03 02:32:44
欢迎来到文档混乱的Angular2和TypeScript第三方模块世界!根据您的设置和环境,下面是您可能需要的许多部分:
//custom_typings.d.ts
declare module 'my-module-name' {
export function foo() : any;
}//app.component.ts
import * as MyModule from 'my-module-name';//index.html
System.config({
defaultJSExtensions: true,
packages: {
app: {format: 'register', defaultExtension: 'js'},
"/angular2": {"defaultExtension": false}
},
map: {
'my-module-name': 'node_modules/my-module-name'
}
});//如果你有一个注册的npm模块,那么你可以直接cli安装它:
`npm install my-module-name --save`//或者,如果不是这样,您可以在package.json中放置一个自定义安装绑定
"dependencies": {
"angular2": "2.0.0-beta.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"my-module-name": "git+https://stash.somecompany.com/my-module.name.git#0.1.0"
}https://stackoverflow.com/questions/35157299
复制相似问题