HereMaps Javascript MemoryLeak?

Question

I am currently trying to find some potential memory leaks in my angular application and found something which should regard to the hereMap, that I am using in one component. This is the situation:

I have an Angular 12 SPA with two components:

ComponentA - completely empty angular component - just for routing away from component B

ComponentB - the component that is using the hereMap.

When switching routes from Component A to B to A I would expect the garbage collector to remove most of the allocated memory after going back to A after a certain amount of time or when clicking "Collect garbage" in DevTools.

Here is what drives me crazy:

Every time when I go to the route with ComponentB, it seems like mapsjs-core.js adds a new TileManager that stays in memory forever and holds an enormous amount of objects and Arrays (3.5k Arrays and 10k Objects each time) which adds up to like 3-5mb memory each time.

Heap Snapshot

Those objects include textures, meshes, shields, etc in multiple instances of TileManagers (TileManager_0, TileManager_1, TileManager_2 after 3 times of creating a new instance of ComponentB).

After ngOnDestroy of ComponentB got called, ComponentB is no longer part of the memory, so disposing the map seems to work as expected.

Here is how the components look like:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  styleUrls: ['./component-a.component.styl']
})
export class ComponentAComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.styl']
})
export class ComponentBComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('map') public mapElement: ElementRef;
  private map: H.Map;
  private platform: H.service.Platform;
  constructor() { }

    ngOnInit(): void {
        this.platform = new H.service.Platform({
          apikey: myKey
      });
    }
  
    ngAfterViewInit() {
        const defaultLayers = this.platform.createDefaultLayers();
        // Set min and max zoom level
        defaultLayers.vector.normal.map.setMax(16);
        defaultLayers.vector.normal.map.setMin(2);

        // Initialize the map
        this.map = new H.Map(
            this.mapElement.nativeElement,
            defaultLayers.vector.normal.map,
            {
                zoom: ZoomLevels.ZOOM_MIN_SINGLE_MAP
            }
        );
    }
    
    public ngOnDestroy(): void {
        this.map.dispose();
    }

}

Answer 1

We did performance testing on both simple vanilla Javascript application and angular application. And the object are getting released from the heap memory as required. Please find the below attached results.

And please keep note of the point that the Map is not supposed to dispose any other objects but itself, so application must explicitly dispose any other resource created by the application. The reason for it is very simple: let's take an application, that created a provider and populated it, the application might decide to re-use this provider, but dispose the map. And please follow below links for best practices.

1>Working of HERE Maps API for Javascript. https://developer.here.com/documentation/maps/3.1.25.0/dev_guide/topics/get-started.html

2>Angular example.

https://developer.here.com/blog/display-here-maps-angular-web-application(please add disposing of heremap object in the ngOnDestroy method of angular i.e this.map.dispose())

3>Best Practices.

https://developer.here.com/documentation/maps/3.1.25.0/dev_guide/topics/best-practices.html