Using the ArcGIS API for JavaScript with Angular

This guide demonstrates how to use the ArcGIS API for JavaScript with Angular applications built with the Angular CLI. There are two different methods:

• Use the @arcgis/webpack-plugin to customize Webpack configuration. Note: if you are using the Angular CLI, Angular 8.x and Angular CLI 8.x required in order to use Angular's CLI Builder API.

• Use esri-loader

Installation

After creating an Angular CLI project, install your preferred package.

@arcgis/webpack-plugin

npm install --save @arcgis/webpack-plugin

esri-loader

npm install --save esri-loader

Configuration

Version 8 of the Angular CLI makes it possible to customize your webpack configuration in order to use the arcgis-webpack-plugin on top of the cli's under-the-hood configuration. If you are using esri-loader, you can skip this section.

• First, install this helper to set up a custom webpack builder:

npm install --save-dev @angular-builders/custom-webpack

• Update the angular.json workspace configuration file under projects.architect with the builder information:

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./path-to-new-config-file.config.js"
    },
    "outputPath": "dist/angular-builder-esri"
  }
}
...
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "angular-builder-esri:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "angular-builder-esri:build:production
    }
  }
}

• Create a new webpack config file in root. Its path should match the path you supplied above in your angular.json file:

const ArcGISPlugin = require("@arcgis/webpack-plugin");
/**
 * Configuration items defined here will be appended to the end of the existing webpack config defined by the Angular CLI.
 */
module.exports = {
  plugins: [new ArcGISPlugin()],
  node: {
    process: false,
    global: false,
    fs: "empty"
  }
};

• Update tsconfig.json as follows:

"target": "es5",
"lib": ["dom", "es2015.promise", "es5", "es6"]

Components

Once you have the modules loaded from the API, the rest of the component will look similar no matter which approach you are using:

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
import Map from "arcgis-js-api/Map";
import MapView from "arcgis-js-api/views/MapView";

@Component({
  selector: "app-esri-map",
  templateUrl: "./esri-map.component.html",
  styleUrls: ["./esri-map.component.scss"]
})
export class MapComponent implements OnInit, OnDestroy {
  // The <div> where we will place the map
  @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
  view: any;

  constructor() {}

  async initializeMap() {
    try {
      // Configure the Map
      const mapProperties = {
        basemap: "streets"
      };

      const map = new Map(mapProperties);

      // Initialize the MapView
      const mapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: [0.1278, 51.5074],
        zoom: 10,
        map: map
      };

      this.view = new MapView(mapViewProperties);
      return this.view;
    } catch (error) {
      console.log("Esri: ", error);
    }
  }

  ngOnInit() {
    this.initializeMap();
  }

  ngOnDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
}

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
import { loadModules } from "esri-loader";

@Component({
  selector: "app-esri-map",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class MapComponent implements OnInit, OnDestroy {
  // The <div> where we will place the map
  @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
  view: any;

  constructor() {}

  async initializeMap() {
    try {
      // Load the modules for the ArcGIS API for JavaScript
      const [Map, MapView] = await loadModules(["esri/Map", "esri/views/MapView"]);

      // Configure the Map
      const mapProperties = {
        basemap: "streets"
      };

      const map = new Map(mapProperties);

      // Initialize the MapView
      const mapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: [0.1278, 51.5074],
        zoom: 10,
        map: map
      };

      this.view = new MapView(mapViewProperties);

      return this.view;
    } catch (error) {
      console.log("EsriLoader: ", error);
    }
  }

  ngOnInit() {
    this.initializeMap();
  }

  ngOnDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
}

More Angular resources

Working examples of esri-loader and @arcgis/webpack-plugin applications are available on Github at angular-cli-esri-map.