Basemap Gallery Widget aborts requests

Question

Hey all, I've been trying to chase down an issue where the Basemap Gallery Widget in the 4.15 JS API is aborting requests, which results in an incomplete list of basemaps. The application we're developing is accessing data via our own Portal deployment, which is where the JS API should be searching for basemaps. Upon first load, often times the basemap gallery list will load successfully. However, refreshing the page will almost certainly create the issue using the example here. This is what it looks like when the basemap requests get aborted: Here's an example error: [esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: '1725208f67e-basemap-8') {name: "AbortError", message: "Aborted", details: undefined, dojoType: "cancel"}‍‍‍ Our application will be using WebMaps from the JS API instead of Maps. The issue seems to be worse when visualizing a WebMap rather than a Map. Further, the application we're developing is an Angular 8 app, and the issue seems to be worse when a new map is brought into the page from behind an `*ngIf` directive. If I understand ngIf correctly, this Angular directive totally removes the map

element from the page when the "if" condition is false. So, said another way, the issue may be worse when the map is dynamically added and/or removed from the page. I'm able to replicate this on Windows and Ubuntu in Chrome and Firefox. Also of note, I am not the Portal administrator, thus I'm unaware of how it was originally configured. I could likely get in touch with the admin if there's evidence pointing to a config issue. Here's a simple example that references our Portal instance and a public WebMap from the Portal. Just open up devtools, load the page, and chances are you'll see many of the basemaps' requests were aborted. If not, refresh the page and the issue should appear. <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Portal Basemap Abort Errorstitle> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.15/">script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <script> require([ "esri/config", "esri/WebMap", "esri/portal/Portal", "esri/views/MapView", "esri/widgets/BasemapGallery", "esri/widgets/Search", "esri/widgets/Expand", ], function( esriConfig, WebMap, Portal, MapView, BasemapGallery, Search, Expand, ) { esriConfig.portalUrl = "https://gistestportal.vhb.com/site"; const portal = new Portal(); portal .load() .then(function() { const zoomLevel = 11; const map = new WebMap({ portalItem: { id: 'ae1cb74010f34c16bf2c61941555ed23', } }); const view = new MapView({ container: "viewDiv", map: map, center: [-79.9959, 40.4406], zoom: zoomLevel, }); const basemapGallery = new BasemapGallery({ view: view }); const bgExpand = new Expand({ view: view, content: basemapGallery }); view.ui.add(bgExpand, "top-right"); }) .catch(function(error) { console.error(error); }); }); script> head> <body> <div id="viewDiv">div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Any advice would be greatly appreciated! Thanks for your help.

StephenRunk · Accepted Answer

Just off the cuff, cancels for me are a timing issue if they are happening due to my code (not user input). In this case maybe the view is not finished initializing and that is triggering the basemapGallery to initialize a second time or at least cancel its initial requests? Using your code example I was able to replicate your issue semi-frequently. After waiting for the views promise to resolve via view.when (API 4.6+) or view.then (API <=4.5) I couldn't replicate the problem? Not sure if this is a workaround, fix or just luck on the later testing. const view = new MapView({ container: "viewDiv", map: map, center: [-79.9959, 40.4406], zoom: zoomLevel, }) view.when(function() { const basemapGallery = new BasemapGallery({ view: view }); const bgExpand = new Expand({ view: view, content: basemapGallery }); view.ui.add(bgExpand, "top-right"); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍