how to initilize the module with variable apiKey

I have the google api key in a singleton configuration service (a way to share the app configuration accross all the application).

How can I pass the apiKey variable the module inside @NgModule?

`@NgModule({

imports: [ BrowserModule, CommonModule, FormsModule, AgmCoreModule.forRoot({ apiKey: ‘YOUR_KEY’ // <-- I cannot use a constant!!! How can I pass a variable? }) ], providers: [], declarations: [ AppComponent ], bootstrap: [ AppComponent ] })`

[jor-rit]

Depends on what kind of build tool you are using (e.g. angular-cli or custom webpack or …) and where the variable should come from. This can be a little tricky. Specially when you also want to use AOT compiling, which prevents too much dynamic code inside the @NgModule.

The solution I currently implemented is overriding the ‘lazy config provider’ in my main app.module.

In the module where I actually use the map, I use an empty config in the forRoot:

AgmCoreModule.forRoot()

In my app.module.ts: import the injection token:

import { LAZY_MAPS_API_CONFIG }
  from 'angular2-google-maps/core/services';

Add to providers in @NgModule:

providers: [
    {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}
  ],

And implement that ‘GoogleMapsConfig’ class, which should implement the LazyMapsAPILoaderConfigLiteral interface (from ’ from ‘angular2-google-maps/core/services’).

@Injectable()
class GoogleMapsConfig {
  apiKey: string;
...
  constructor() {
    apiKey = getMyApiKeyFromSomewhere()
...
  }
}

In that injectable I can inject other services and read the config from somewhere. (e.g. if you use angular-cli you can import environments there). Or maybe read out the domain from the browser… or call an serverside API…

[bradrust]

@jorrit-wehelp, thank you for your guidance. I am including below what is working for me…

import {Injectable} from "@angular/core";
import {LazyMapsAPILoaderConfigLiteral} from "@agm/core";
import {Config} from "../providers/config";

@Injectable()
export class MapsConfig implements LazyMapsAPILoaderConfigLiteral{
  public apiKey: string
  public libraries: string[]
  constructor(config: Config) {
    this.apiKey = config.get("MAP_API_JS_KEY")
    this.libraries = ['places']
    console.log("lazy map init with " + this.apiKey)
  }
}

in my main @ngmodule, I have this in providers…

    {
      provide: LAZY_MAPS_API_CONFIG,
      useClass: MapsConfig,
      deps: [Config]
    }

The reference to the Config class is a build-time webpack variable-replace which setups of a map of variables used in Dev or Prod modes.