How do you add a feature layer to the angular-cli-esri-map with the webpack plugin?

Question

I'm trying to modify the gihub sample at GitHub - Esri/angular-cli-esri-map at arcgis-webpack-angular  and simply add a feature layer. However, when I do that I get the Failed to execute 'importScripts' on 'WorkerGlobalScope' error.

DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/arcgis-js-api/views/2d/tiling/TileCoverage.js' failed to load.
 at Function.injectUrl (https://js.arcgis.com/4.15/dojo/dojo-lite.js:6:127)

This is mentioned on the github site and I've tried to follow the solution to install the external loader but the instructions are not very clear.  I've simply copied the external loader and pasted it into my constructor.  This has no effect however.  I've tried with v4.15 and v4.16 and get the same result.  I suspect it has something to do with dojo folder that it can't find.

Can anyone offer some clear guidance on how to use the angular cli map with webpack particularly how to get the loaders to work?  Thanks so much.

Allison Davis‌

Andy Gup

AndyGup · Accepted Answer

Hi Nils, here's a working example. Please note for future reference, it's much preferred to open Angular issues in the angular-cli-esri-map github repo so it's easier for others to search for similar answers. Also here's another gotcha to watch out for, the DEFAULT_WORKER_URL version has to match the ArcGIS API for JavaScript version that you installed: https://github.com/Esri/angular-cli-esri-map/issues/74. -Andy /* Copyright 2020 Esri Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core'; import Map from "esri/Map"; import MapView from "esri/views/MapView"; import FeatureLayer from "esri/layers/FeatureLayer"; import SimpleRenderer from "esri/renderers/SimpleRenderer"; import SimpleMarkerSymbol from "esri/symbols/SimpleMarkerSymbol"; import esriConfig from "esri/config"; @Component({ selector: 'app-esri-map', templateUrl: './esri-map.component.html', styleUrls: ['./esri-map.component.scss'] }) export class EsriMapComponent implements OnInit, OnDestroy { @Output() mapLoadedEvent = new EventEmitter<boolean>(); // The

where we will place the map @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef; private _zoom = 10; private _center: Array<number> = [0.1278, 51.5074]; private _basemap = 'streets'; private _loaded = false; private _view: MapView = null; get mapLoaded(): boolean { return this._loaded; } @Input() set zoom(zoom: number) { this._zoom = zoom; } get zoom(): number { return this._zoom; } @Input() set center(center: Array<number>) { this._center = center; } get center(): Array<number> { return this._center; } @Input() set basemap(basemap: string) { this._basemap = basemap; } get basemap(): string { return this._basemap; } constructor() { } async initializeMap() { const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.16/"; const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`; esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL; esriConfig.workers.loaderConfig = { baseUrl: `${DEFAULT_WORKER_URL}dojo`, packages: [ { name: "esri", location: `${DEFAULT_WORKER_URL}esri` }, { name: "dojo", location: `${DEFAULT_WORKER_URL}dojo` }, { name: "dojox", location: `${DEFAULT_WORKER_URL}dojox` }, { name: "dstore", location: `${DEFAULT_WORKER_URL}dstore` }, { name: "moment", location: `${DEFAULT_WORKER_URL}moment` }, { name: "@dojo", location: `${DEFAULT_WORKER_URL}@dojo` }, { name: "cldrjs", location: `${DEFAULT_WORKER_URL}cldrjs`, main: "dist/cldr" }, { name: "globalize", location: `${DEFAULT_WORKER_URL}globalize`, main: "dist/globalize" }, { name: "maquette", location: `${DEFAULT_WORKER_URL}maquette`, main: "dist/maquette.umd" }, { name: "maquette-css-transitions", location: `${DEFAULT_WORKER_URL}maquette-css-transitions`, main: "dist/maquette-css-transitions.umd" }, { name: "maquette-jsx", location: `${DEFAULT_WORKER_URL}maquette-jsx`, main: "dist/maquette-jsx.umd" }, { name: "tslib", location: `${DEFAULT_WORKER_URL}tslib`, main: "tslib" } ] }; // Configure the Map const mapProperties = { basemap: this._basemap }; const map = new Map(mapProperties); const citiesRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() size: 5, color: [0, 244, 255, 1] } }; const citiesLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0" }); map.add(citiesLayer); // Initialize the MapView const mapViewProperties = { container: this.mapViewEl.nativeElement, center: this._center, zoom: this._zoom, map: map }; this._view = new MapView(mapViewProperties); // wait for the map to load await this._view.when(); return this._view; } ngOnInit() { // Initialize MapView and return an instance of MapView this.initializeMap().then((mapView) => { // The map has been initialized console.log('mapView ready: ', mapView.ready); this._loaded = mapView.ready; this.mapLoadedEvent.emit(true); }); } ngOnDestroy() { if (this._view){ this._view.container = null; } } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍