mapsAPILoader.load() listener is not listening first time

Question

I'm using agm/core to auto complete google address in angular component and I have added the following code in my service module.

@NgModule({
  imports:[ AgmCoreModule.forRoot({
    apiKey: 'testAPiKEY', 
    libraries: ['places']
  }),]
}

and on init of my component I have added following code,

this.mapsAPILoader.load().then(() => {  
  const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
            types: ['address']
    });
  this.autoComplete.addListener('place_changed', () => {
    this.zone.run(() => {
      // get the place result
      const place: google.maps.places.PlaceResult = this.autoComplete.getPlace();
    this.form
      .get('locations.address')
      .setValue(place['formatted_address']);
    place.address_components.forEach((placeComponent) => {
      const addressType = placeComponent.types[0];

      if (addressType === 'administrative_area_level_1') {                  
        this.form
          .get('locations.state')
          .setValue(placeComponent['long_name']);
      } else if ( addressType === 'administrative_area_level_2') {                  
        this.form
          .get('locations.city')
          .setValue(placeComponent['long_name']);
      } else if (addressType === 'country') {
        this.form
          .get('locations.country')
          .setValue(placeComponent['long_name']);
      } else if (addressType === 'postal_code') {                  
        this.form
          .get('locations.zip')
          .setValue(placeComponent['long_name']);
      }
    });

    // verify result
    if (place.geometry === undefined || place.geometry === null) {
       return;
    }
    // -------------

   });
  });          
});

but it is not working when first time address is selected after loading of that component when I type address second time and select it works. Any idea?