Ionic5 agm/core: Info Window [isOpen] error : Cannot read property 'then' of undefined at agm-core.js

I am having an error on application map info window initialization . I want the application to load the map and display the marker info automatically without user clicking on the marker.

I am using agm/core@^1.0.0

here is my code to display the info window.

<agm-map
                [latitude]="latitude"
                [longitude]="longitude"
                [zoom]="zoom"
                (mapClick)="onSetMarker($event)"
                [streetViewControl]="false"
                [disableDefaultUI]="false"
                [zoomControl]="false">

            <agm-marker
                    [latitude]="latitude"
                    [longitude]="longitude"
                    [markerDraggable]="true"
                    [animation]="'BOUNCE'"
                    [markerClickable]="true"
                    (dragEnd)="markerDragEnd($event)"
                    [openInfoWindow]="true"
                    [iconUrl]="iconUrl"
                    class="mapMarker">
                <agm-info-window [isOpen]="true">
                    <strong>
                        {{address}}
                    </strong>
                </agm-info-window>
            </agm-marker>
        </agm-map>

Here is an error I get when application loads and fails to display info window.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
    at VM225815 vendor.js:1363
    at ZoneDelegate.invoke (VM225810 polyfills.js:3470)
    at Object.onInvoke (VM225815 vendor.js:69538)
    at ZoneDelegate.invoke (VM225810 polyfills.js:3469)
    at Zone.run (VM225810 polyfills.js:3229)
    at VM225810 polyfills.js:3963
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3505)
    at Object.onInvokeTask (VM225815 vendor.js:69526)
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3504)
    at Zone.runTask (VM225810 polyfills.js:3273)
    at resolvePromise (VM225810 polyfills.js:3904)
    at VM225810 polyfills.js:3970
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3505)
    at Object.onInvokeTask (VM225815 vendor.js:69526)
    at ZoneDelegate.invokeTask (VM225810 polyfills.js:3504)
    at Zone.runTask (VM225810 polyfills.js:3273)
    at drainMicroTaskQueue (VM225810 polyfills.js:3675)

When I click on the highlighted file link, I get this code below.

open(infoWindow) {
                return this._infoWindows.get(infoWindow).then((w)=>{
                    if (infoWindow.hostMarker != null) {
                        return this._markerManager.getNativeMarker(infoWindow.hostMarker).then((marker)=>{
                            return this._mapsWrapper.getNativeMap().then((map)=>w.open(map, marker));
                        }
                        );
                    }
                    return this._mapsWrapper.getNativeMap().then((map)=>w.open(map));
                }
                );
            }

You are receiving that error because you are not returning your promise to the calling function. And since you did not provide the .ts file and only the .html file, there's only so much that we can say. But please take a look at the sample below without the errors for your reference:

https://stackblitz.com/edit/angular-agm-63947796

app.component.html

<agm-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [streetViewControl]="false"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)">

  <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">
      
    <agm-info-window [isOpen]="true">
      <strong>{{m.address}}</strong>
    </agm-info-window>
  </agm-marker>
</agm-map>

app.component.ts

import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // google maps zoom level
  zoom: number = 8;
  
  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }
  
  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true,
      address:"dynamic address logic here (i.e. Geocoding API)"
    });
  }
  
  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }
  
  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'A',
          draggable: true,
      address:"address 1"
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'B',
          draggable: false,
      address:"address 2"
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'C',
          draggable: true,
      address:"address 3"
      }
  ]
}

// just an interface for type safety.
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
  address:string;
}