Angular leaflet map doesn't load tiles after refreshing the page

Working through an app project I inherited using Ionic, Angular and ngx-leaflet to name a few elements... I had a problem where the map shows only all map tiles when navigating via my app in the Xcode simulator.  The simulator screen would show just a small tile and the rest of the area where the map should be visible stays in gray color.

Image

Versions

Files

Taking snippets of the key areas of the following files

map-detail.page.html

    <ion-spinner name="lines" *ngIf="!mapLoaded"></ion-spinner>
      <ion-card *ngIf="mapLoaded">
        <div id="map"
          leaflet
          [leafletOptions]="mapOptions"
          [leafletLayers]="layers"
          (leafletMapReady)="onMapReady($event)"
          style="height: 300px"
        ></div>
      </ion-card>

map-detail.page.ts:

/**
   * Determine the Map structure
   */
  setupMap() {
    const tiles = tileLayer(
      "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
      {
        maxZoom: 18,
        attribution: "..."
      }
    );

    this.mapOptions = {
      center: latLng(-25.734968, 134.489563),
      zoom: 3,
      layers: [tiles],
      zoomControl: false,
      scrollWheelZoom: false
    };
  }

  onMapReady(map: Map) {
    this.map = map;
  }

After a lot of trial and error and Googling.... I was able to find out that map.invalidateSize() has a part to play in the solution.  But the question how?

Through reading 'Data-toggle tab does not download Leaflet map' it needs to be attached to the map object.  Which in this instance needs to be in the onMapReady function.

However, when I tried the following

  onMapReady(map: Map) {
    map.invalidateSize();
    this.map = map;
  }

No impact.

In turn, maybe the issue was time base, so I applied a timeout

  onMapReady(map: Map) {
    setTimeout(() => {
      map.invalidateSize();
    }, 0);
    this.map = map;
  }

Reload and working

Image