Angular-google-maps: Lazy loading api key

[vlaco]

Hi, going through the comments I wasnt sure if this option was available using this library and what version is it available in.
I am loading environment file via a http request and my api key is stored in that file. I am using APP_INITIALIZER to load it and I tried then adding apiKey to LazyMapsAPILoaderConfigLiteral but it doesn't work. Could you please help me and give me more info?

[yohny]

I managed to get lazy loaded API key working by creating InitService that loads API key during app initiialization and then provides it to AGM map using LAZY_MAPS_API_CONFIG injection token

providers: [
{
      provide: APP_INITIALIZER,
      useFactory: (http: HttpClient) => () => InitService.loadApiKey(http),
      deps: [HttpClient,],
      multi: true
    }, {
      provide: LAZY_MAPS_API_CONFIG,
      useFactory: (init: InitService) => ({ apiKey: init.apiKey }),
      deps: [InitService]
    }
]

[vlaco]

Thanks! Could you also post the code for the InitService because I cannot get it to work on my example?

[yohny]

here you go

@Injectable({
  providedIn: 'root'
})
export class InitService {
  private static _apiKey: string;
  get apiKey() {
    return InitService._apiKey;
  }

  public static loadApiKey(httpClient: HttpClient)  {
    return httpClient.get<SettingsDto>(`api/init`) // use your endpoint for getting the settings and your own SettingsDto type
      .toPromise()
      .then(dto => {
        this._apiKey = dto.captchaSiteKey; // adjust to your DTO
      });
  }
}

[vlaco]

Thanks a lot! But could you tell me what versions of Angular and library are you using? It is still not working for me. I get the Google Maps JavaScript API warning: NoApiKeys warning. Seems like LAZY_MAPS_API_CONFIG is initialized before APP_INITIALIZER is done aka the Promise from InitService. Makes no sense. My version of Angular is 8.1.3 and @agm/coren1.0.0-beta.7

[yohny]

i tried it with @agm/core version 3.0.0-beta.0

[vlaco]

Still not working for me. Seems like it doesn't even initialize the service in LAZY_MAPS_API_CONFIG

[DanAtkinson]

I've done something like the following:

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      // An initial api key must be provided, even if it's an empty string.
      apiKey: 'initialKey'
    }),
  ],
  providers: [
    {
      // APP_INITIALIZER is the Angular dependency injection token.
      provide: APP_INITIALIZER,
      // Pass in the AGM dependency injection token.
      deps: [LAZY_MAPS_API_CONFIG],
      // Allow for multiple startup injectors if needed.
      multi: true,
      // UseFactory provides Angular with the function to invoke.
      useFactory: (googleMapsConfig: LazyMapsAPILoaderConfigLiteral) => () => AppInitService.Init(googleMapsConfig)
    }
  ]
})

And your application initialisation service:

@Injectable()
export class AppInitService {
  public static Init(googleMapsConfig: LazyMapsAPILoaderConfigLiteral) : Promise<void> {
    return new Promise<void>((resolve, reject) => {
     // Business logic to inject the API key is for you to fill in.
     googleMapsConfig.apiKey = loadApiKey();
    });
  }
}

In your instance, you could place your method for retrieving your API key into loadApiKey(), using the logic provided by @yohny above.

[vlaco]

@DanAtkinson your solution worked! Thank you so much! :)