AtlasX

Name S.

Login

Development Tips

Development Tips

Migrate ArcGIS API for JavaScript to ES modules

  1. Install the modules into your project:
$ npm install @arcgis/core --save
  1. Copy assets – There are several small changes to this repo that enable the JS API to work. In angular.json copy the JS API assets folder to /assets. And, under build > options > allowedCommonJsDependencies you can add moment to the array to suppress CommonJS or AMD dependencies warnings in dev builds.
  "allowedCommonJsDependencies": [
    "moment"
  ],
  "assets": [
    {
      "glob": "**/*",
      "input": "node_modules/@arcgis/core/assets",
      "output": "/assets/"
    },
    "src/favicon.ico",
    "src/assets"
  ],
  1. Configure CSS. Choose a theme and then configure your code to copy the theme files from @arcgis/core/assets/esri/themes/ into your project. If you want to apply the CSS globally then add it to angular.json and it will automatically be accessible for any components using the JS API:
  "styles": [
    "src/styles.scss",
    "node_modules/@arcgis/core/assets/esri/themes/light/main.css"
  ],

To use the CSS at a component-level, set a CSS link in index.html:

<link rel="stylesheet" href="assets/esri/themes/dark/main.css" />
  1. Working with Routes – when building routes, set the base url for the /assets folder. Development and deployment will require setting different urls.
import config from '@arcgis/core/config'

  . . .

  ngOnInit(): any {
    // assuming assets are in /assets
    config.assetsPath = `${document.baseURI}/assets`
  }
  1. Migrate esri-loader to ES module. To migrate from esri-loader to ES modules, your code will need to be refactored to ES modules.

Here is a snippet of esri-loader code:

import { loadModules } from 'esri-loader'

const [Map, MapView] = await loadModules(['esri/Map', 'esri/views/MapView'])

This is the code refactored with @arcgis/core module paths:

// ES modules
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'

This is the full sample code refactored with @arcgis/core.

import { Component, ElementRef, OnInit } from '@angular/core'

import config from '@arcgis/core/config'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  map: Map | null = null
  view: MapView | null = null

  private trailheadsLayer: FeatureLayer | null = null

  constructor(private hostRef: ElementRef<HTMLDivElement>) {}

  ngOnInit() {
    config.assetsPath = `${document.baseURI}/assets`

    this.map = new Map({
      basemap: 'topo-vector',
    })

    this.view = new MapView({
      container: this.hostRef.nativeElement,
      map: this.map,
      center: [-118.805, 34.027], // longitude, latitude
      zoom: 13,
    })

    this.trailheadsLayer = new FeatureLayer({
      url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0',
    })
    this.map.add(this.trailheadsLayer)
  }
}
  1. Run npx ng serve --open for a dev server that will automatically open a browser window.

References:

Resolving Permission Errors

ข้อผิดพลาด EACCES permission สามารถเกิดขึ้นได้เมื่อมีการติดตั้ง global package หากเป็นกรณีนี้ อาจต้องตั้งค่า npm เพื่อดำเนินการโดยไม่มีการอนุญาตระดับสูง

Note

การใช้ sudo กับคำสั่ง npm นั้นไม่แนะนำให้ใช้งาน เพราะจพทำให้เกิดปัญหาแทรกซ้อนที่ตามมาได้

คู่มือนี้มีสองตัวเลือกในการแก้ไขปัญหา permission สำหรับเอกสารฉบับเต็มและตัวเลือกเพิ่มเติม ดูที่ npm docs

Option 1

วิธีที่ดีที่สุดในการหลีกเลี่ยงปัญหา permission คือการติดตั้ง NodeJS และ npm ใหม่ โดยใช้ node version manager (NVM)

คู่มือนี้จะสอนการติดตั้งและใช้งาน nvm สำหรับเอกสารฉบับเต็ม ดูได้ที่ nvm docs สำหรับตัวเลือกและคำแนะนำเพิ่มเติมสำหรับ Windows ดูได้ที่ nvm docs

  1. ติดตั้ง nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
  1. ให้เปิด terminal ขึ้นมาใหม่ จากนั้นให้ใช้คำสั่งดังนี้เพื่อตรวจสอบว่าการติดตั้งสมบูรณ์หรือไม่
$ command -v nvm
  1. ในการดาวน์โหลดและติดตั้ง NodeJS เวอร์ชั่น LTS ให้ใช้คำสั่ง
$ nvm install --lts
  1. กำหนดให้ NodeJS ที่เพิ่งติดตั้งเป็น environment เริ่มต้น โดยใช้คำสั่ง
$ nvm alias default lts/*
  1. ให้เปิด terminal ขึ้นมาใหม่ เราสามารถตรวจสอบได้ว่า nvm กำลังจัดการกับ NodeJS เวอร์ชั่นอะไรอยู่ โดยใช้คำสั่งดังนี้
$ node -v # จะแสดงเวอร์ชั่นของ NodeJS
$ which npm # จะแสดง path ที่อยู่ในโฟลเดอร์ ~/.nvm

หลังจากนี้ global package จะถูกติดตั้งอยู่ในโฟลเดอร์ ~/.nvm ปัญหาเกี่ยวกับ permission จะไม่เกิดขึ้นอีกเมื่อใช้ npm โดยไม่มีคำสั่ง sudo

Option 2

ใช้กับ Windows ไม่ได้

เปลี่ยน owner ของโฟลเดอร์ npm ให้เป็น user ปัจจุบัน

$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
$ sudo chown -R $(whoami) ~/.npm ~/.npmrc

เนื่องจากโฟลเดอร์ global เหล่านี้ไม่ได้เป็นเจ้าของโดย root อีกต่อไป คุณจึงสามารถติดตั้ง global package ได้โดยไม่ต้องใช้ sudo