Memory Issue - ArcGIS 4.14 & Angular - Memory not getting freed

AndrewMurdoch1

Good Day

I've noticed a memory issue where, at least in Angular 9, once your destroy the view / map objects, the memory usage is extremely high, ~100 MB / map.  I’ve Prepared a test repo, that initializes a map and allows you to jump to another page, when I run this code and jump between the pages the memory isn't being freed correctly, hopefully this helps:

 

GitHub - docmur/angular-esri-memory-test 

My destroy functions, of our main application is:

nullifyComponents() {
  console.log('Destroying the ESRI View and ESRI Map');
  if (this._map) {
    this._map.removeAll();
    this._map.destroy();
    this._map = null;
    delete this._map;
  } else {
    console.log('Map is NULL');
  }

  if (this._view) {
    this._view.map = null;
    this._view.container = null;
    this._view.destroy();
    this._view = null;
    delete this._view;
  } else {
    console.log('View is NULL');
  }
  
    this._BasemapGallery.destroy();
    this._BasemapGallery = null;
    this.EsriMap = null;
    this.EsriMapView = null;
    this.FeatureLayer = null;
    this.SimpleMarkerSymbol = null;
    this.SimpleFillSymbol = null;
    this.SimpleLineSymbol = null;
    this.Color = null;
    this.Graphic = null;
    this.WatchUtil = null;
    this.BasemapGallery = null;
    this.Home = null;
    this.Expand = null;
    this.Print = null;
    this.PrintTask = null;
    this.PrintTemplate = null;
    this.PrintParameters = null;
    this._BasemapGallery = null;
}

removeByTag(tag) {
  const element = document.getElementById(tag);
  while (element[0]) {
    element[0].parentNode.removeChild(element[0])
  }
}

@HostListener('window:beforeunload')
async ngOnDestroy() {
  try {
    /* Get rid over everything else */
    this.removeAll();

    /* Destroy and remove memory references to the maps */
    this.nullifyComponents();

    this.mapViewEl = null;
    delete this.mapViewEl;

    this.removeByTag('mapElement');
  } catch (error) {
    console.log(error);
  }
}

When I look at the memory tab I see:

When I run a heap stack trace I see:

Among another objects.  Is there another way to assure the memory is getting freed? 

If I navigate back to the maps and away, it will add another 100 MB / map, until all the memory is used up.  The function removeAll is setting all internal variables to null to assure they don't reference any of the ESRI components.    The version of the library in use is 4.14. I’ve tried everything I can think of to free the memory including deleting the DOM elements in ngOnDestroy, and after they’re removed, the memory still remains.

I've seen this across Windows, Linux and Firefox / Chromium based browsers.

Thanks

AndrewMurdoch1

Found a good enough workaround,  if you call window.location.reload() inside ngOnDestroy of any page that hosts the maps, the memory will be freed, which is what we're doing.