Good Day
I've had a lot of problems with the memory and Angular, so this is how we keep it in check:
1. Use a Store to keep the view / map, and use the RenderFactory to attach the view / map into and remove it from a container.
2. Make sure you're removing, freeing or deleting as many resources as possible, for instance here is some code from our ngOnDestroy()
public ngOnDestroy(): void {
this.esriSvc.removeMapViewContainer(this.mapViewEl);
try {
this._Attribution?.destroy();
this._Attribution = null;
} catch (error) {
console.log(error);
}
try {
this._clickEvent?.remove();
this._clickEvent = null;
this._BasemapGalleryWatcher?.remove();
this._BasemapGalleryWatcher = null
} catch (error) {
console.log(error);
}
try {
this._sketchWidget?.destroy();
this._sketchWidget = null;
this.sketchLayer?.destroy();
this.sketchLayer = null;
} catch (error) {
console.log(error);
}
try {
this._view.map.layers.forEach((layer) => {
layer.clear()
layer.destroy()
})
this._view.map.layers = null;
} catch (error) {
console.log(error);
}
try {
this._view.ui.empty();
this._view.popup = null;
} catch (error) {
console.log(error);
}
try {
this._map.removeAll();
} catch (error) {
console.log(error);
}
try {
this._widgets.forEach((widget) => {
if (widget) {
try {
widget = null;
} catch (error) {
console.log(error);
}
}
})
this._widgets = [];
} catch (error) {
console.log(error);
}
//
// NOTE: This function resets every variable we allocate
//
this.destroyStuff();
}
3. Litsten to Andy, he's awesome and has helped me in the past.
Using the method I described, I've been able to cycle between 10k maps with essentially 0 memory increase. You can also look into using a global render setting, if that's applicable, and try to never destroy the map or remove and add it if you don't have to. I've found in a lot of cases it's better to just hide it, then detach and add it back. Although I know that can't always be avoided.
