Skip To ContentArcGIS for DevelopersSign In Dashboard

Using the ArcGIS API for JavaScript with Angular

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

Please refer to the Using Frameworks guide for more information and to help determine which approach is best suited for your project.

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

As of Angular CLI 8.x, it is possible to customize your webpack configuration in order to use the arcgis-webpack-plugin. If you are using esri-loader, you can skip this section.

  • First, install this helper library 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 name and 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"]
  • If you are using ArcGIS API for JavaScript TypeScript typings, be sure to specify them in the tsconfig.app.json:
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["arcgis-js-api"] //specify the types here
}

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);
      await this.view.when();  //wait for the map to load
      return this.view;
    } catch (error) {
      console.error("Initialize Map: ", 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);
      await this.view.when(); // wait for map to load
      return this.view;
    } catch (error) {
      console.error("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.

Content