将 Angular 4 与 esri-loader 一起使用答案

【问题标题】：Using angular 4 with esri-loader将 Angular 4 与 esri-loader 一起使用
【发布时间】：2019-01-07 13:37:27
【问题描述】：

我计划使用 esri (ArcGIS) 和 Angular 5 开发基于 GIS 的应用程序。我可以使用 AngularJS (Angular 1) 找到 esri 的示例代码，但无法使用 Angular 4 或 5 获取 esri 的示例代码。我也尝试在 YouTube 上搜索，但我想我找不到。

你们能帮我指出正确的方向吗？

谢谢。

【问题讨论】：

Angular 4 或 5 或 6
快速浏览了一下，我也没有找到什么，只有this，它已被存档，似乎已停止维护。您为什么不尝试使用 Leaflet 或 Openlayers？

标签： angular esri

【解决方案1】：

您可能已经发现了这一点，但对于其他人来说，esri-loader 用于延迟加载 esri 类型...https://github.com/Esri/esri-loader

在 Angular 4 和 8（typescript 3.3）之间，angular 和依赖的 typescript 版本都发生了重大变化。实际上，您可能会发现将项目升级到 angular 7 或 8 比尝试使 ESRI 类型与旧版本的 angular 或 typescript 兼容更容易。我正在使用 7 和打字稿 3.2.4。 esri-loaded 似乎在 gitlab 存储库中引用 typescript "typescript": "^3.3.4000"。

这是我当前的项目 package.json，其中包含 Angular 7 参考的工作地图和 esri 类型：

 "dependencies": {
    "@angular/animations": "^7.2.12",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.12",
    "@angular/compiler": "^7.212",
    "@angular/core": "^7.2.12"+,
    "@angular/forms": "^7.2.12",
    "@angular/http": "^7.2.12",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.12",
    "@angular/platform-browser-dynamic": "^7.2.12",
    "@angular/platform-server": "^7.2.12",
    "@angular/router": "^7.2.12",
    "@clr/angular": "^1.1.2",
    "@clr/icons": "^1.1.2",
    "@clr/ui": "^1.1.2",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@types/arcgis-js-api": "^4.12.0",
    "@webcomponents/custom-elements": "^1.0.0",
    "angular2-jwt": "^0.2.3",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.4.1",
    "classlist.js": "1.1.20150312",
    "core-js": "^2.4.1",
    "esri-loader": "^2.10.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.14",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "tslib": "^1.9.0",
    "web-animations-js": "2.3.1",
    "zone.js": "^0.8.29"
  },

https://github.com/Esri/jsapi-resources/tree/master/4.x/typescript

【讨论】：