ArcGIS API for JavaScript: Building apps for Angular ANDY GUP @agup ALLISON DAVIS @araedavis What's the plan today? Learn how to use ArcGIS API for JavaScript with Angular CLI ArcGIS API for JavaScript modules with esri-loader Async patterns Angular Component Dev Kit (CDK) Services Routing State management ArcGIS API for JavaScript modules with webpack Angular 6+ ArcGIS API for JavaScript 4.x https://github.com/Esri/angular-cli-esri-map Getting started 1. Download our repo https://github.com/andygup/angular-plus-arcgis-javascript- ds2020 2. Follow along as we work with Angular sample apps ./sample_apps/app-scaffolding ./sample_apps/esri-loader ...and more... App Scaffolding Basic building blocks Angular CLI "esri-loader" esri­map.component.ts esri-loader Reliably load (or lazy load) ArcGIS modules using our AMD loader Control which ArcGIS modules when/where you want, à la carte It's EASY and very lightweight Sample application esri-loader import { loadModules } from 'esri­loader'; // `loadModules` dynamically injects a <script> tag onto the page // Use Promise­based pattern loadModules([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic' ]).then(([ EsriMap, EsriMapView, Graphic ]) => { // Any ArcGIS JavaScript code here }); // Or, use async/await pattern async initializeMap() { const [Map, MapView, Graphic]:any = await loadModules([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic ]) .catch(err => { console.error('ArcGIS: ', err); Types for arcgis-js-api TypeScript: "a typed superset of JavaScript that compiles to plain JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions for the ArcGIS API for JavaScript: npm install ­­save @types/arcgis­js­api Additional TypeScript resources: Angular's TS cong guide Esri's TypeScript setup guide Asynchronous Operations Three ways to manage out of process, out of sequence operations: Promises Custom Events RxJS Observables Async: Promises Async: Events RxJS and Observables RxJS (Reactive Extensions for JavaScript) - a library for reactive programming Angular uses observables via RxJS to handle many common async operations: HTTP Reactive forms Router Under the hood, Angular custom events extends the RxJS Subject Async: Observables this.formSubscription = this.wonderForm.valueChanges.subscribe(value => { // do something cool with our updated form value! }) // don't forget to clean up any subscriptions ngOnDestroy() { this.formSubscription.unsubscribe() } Angular Component Developer Kit (CDK) Authored by the Angular team Implements common interaction patterns and components Unopinionated about presentation Angular Material built on top of CDK Angular CDK demo Accessibility and responsiveness work out of the box Developers have full control - custom styles, sorting, pagination can be added on top Table template and data source exist independently of each other Angular State Management Application state Component state Shared state Router state Oh so many choices...! Simple map state with RxJS Need to maintain state as we change routes Can use a service and RxJS to maintain the state NgRx Data Store Scalable approach to maintaining application state Angular + @arcgis/webpack- plugin https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack- angular Angular 8 and 9 ArcGIS API for JavaScript 4.7+ only Congure webpack using builders angular-builders/custom-webpack https://www.npmjs.com/package/@angular-builders/custom-webpack @arcgis/webpack-plugin @angular-builders/custom- webpack Customize build cong without ejecting webpack // angular.json ­ custom configuration "build": { "builder": "@angular­builders/custom­webpack:browser", "options": { "customWebpackConfig": { "path": "./extra­webpack.config.js" }, . extra-webpack.cong.js const ArcGISPlugin = require('@arcgis/webpack­plugin'); /** * Configuration items defined here will be appended to the end of the existing webpa CLI. */ module.exports = { plugins: [new ArcGISPlugin()], node: { process: false, global: false, fs: "empty" }, devtool: 'eval' } Initialize the Map import Map from "esri/Map"; import MapView from "esri/views/MapView"; ngOnInit() { this._map = new Map({ basemap: this._basemap }); this._view = new MapView({ container: this.mapViewEl.nativeElement, map: this._map }); } Working with secure services DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope' https://github.com/Esri/arcgis-webpack-plugin#usage Resources Presentation GitHub repo ArcGIS API for JavaScript Using the ArcGIS API for JavaScript with Angular: Guide esri-loader arcgis-webpack-plugin Sample ArcGIS JS API/Angular CLI application GeoNet: ArcGIS API for JavaScript Community GIS Stack Exchange Thank you ANDY GUP @agup ALLISON DAVIS @araedavis.