Question

我在AngularJs 2中使用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？应如何检索它们？

Answer 1

为了正确检索模块，我们需要使用SystemJS指令esri将map映射到包的位置

System.config({
        defaultJSExtensions: true,
        map: {
          esri: '//js.arcgis.com/3.15/esri'
        },
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });

现在正确检索包但仍然收到另一个错误，指出define不是函数

Answer 2

欢迎使用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"
}

找不到包esri

2 个答案: