Defining Dynamic AJAX-Driven Service Providers Using APP_INITIALIZER In Angular 6.1.4

// Import the core angular services.
import { HttpClient } from "@angular/common/http";
import { Inject } from "@angular/core";
import { Injectable } from "@angular/core";
import { InjectionToken } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

export var IP_INFO_API_KEY = new InjectionToken<string>( "IPInfo.io Api Key" );

export interface IPLocation {
	ip: string;
	country: string;
	city: string;
	latitude: number;
	longitude: number;
}

interface IPInfoResponse {
	city?: string;
	country?: string;
	ip: string;
	loc?: string;
}

@Injectable({
	providedIn: "root"
})
export class GeocodeService {

	private apiToken: string;
	private httpClient: HttpClient;

	// I initialize the geocode service.
	constructor(
		@Inject( IP_INFO_API_KEY ) apiToken: string,
		httpClient: HttpClient
		) {

		this.apiToken = apiToken;
		this.httpClient = httpClient;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I try to locate the given IP address.
	public async locate( ipAddress: string ) : Promise<IPLocation> {

		var url = `https://ipinfo.io/${ ipAddress }?token=${ this.apiToken }`;

		var result = await this.httpClient
			.get<IPInfoResponse>( url )
			.toPromise()
		;

		var country = ( result.country || "Unknown" );
		var city = ( result.city || "Unknown" );
		var coordinates = ( result.loc || "" ).split( "," );

		return({
			ip: ipAddress,
			country: country,
			city: city,
			latitude: ( +coordinates.shift() || 0 ),
			longitude: ( +coordinates.shift() || 0 )
		});

	}

}

{
	"ipInfo": {
		"apiToken": "b2bf05e1d6c24a"
	}
}

// Import the core angular services.
import { APP_INITIALIZER } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Provider } from "@angular/core";

// Import the application components and services.
import { IP_INFO_API_KEY } from "./geocode.service";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

// I am the interface for the Config object that will be loaded off disk. This object
// will be made available to Provider Factory functions such that other Providers can
// then be dynamically configured during the application bootstrapping process.
interface Config {
	ipInfo: {
		apiToken: string;
	}
}

@Injectable({
	providedIn: "root"
})
export class AppInitializer {

	public config: Config | null;

	private httpClient: HttpClient;

	// I initialize the app initializer.
	constructor( httpClient: HttpClient ) {

		this.httpClient = httpClient;

		// We will be loading the configuration from a known location on the server.
		// Once it is loaded, this property will be used to dynamically define other
		// injectables in the application providers.
		this.config = null;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I load the remote config file into the config property.
	public async loadConfig() : Promise<void> {

		try {

			this.config = await this.httpClient
				.get<Config>( "./app.config.json" )
				.toPromise()
			;

			console.group( "Configuration Loaded" );
			console.log( this.config );
			console.groupEnd();

		} catch ( error ) {

			console.group( "Configuration Failed" );
			console.error( error );
			console.groupEnd();

			// NOTE: Throwing this error will prevent the application from bootstrapping.
			throw( error );

		}

	}

}

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

export var APP_INITIALIZER_PROVIDERS: Provider[] = [
	// In Angular, the Providers are evaluated in a LAZY FASHION. This means that they
	// are not created until they are actually required by the application. This works
	// to our benefit because it means that we can use Factory Functions to define some
	// of the providers using data that isn't necessarily available at compile-time. In
	// this case, our "APP_INITIALIZER" will be evaluated first, which will block the
	// rest of the bootstrapping process. Then, once the APP_INITIALIZER is evaluated,
	// and application bootstrapping is allowed to continue, we'll have the data needed
	// to configure the rest of the dynamic providers.
	{
		provide: APP_INITIALIZER,
		useFactory: function( appInitializer: AppInitializer ) {

			return(
				function() : Promise<void> {

					// The application will "block" until this promise is resolved.
					return( appInitializer.loadConfig() );

				}
			);

		},
		deps: [ AppInitializer ],
		multi: true
	},
	// Providers aren't evaluated in Angular until they are required. Which means that
	// as long as !!!! NOTHING MAKES EAGER USE OF THE GEOCODESERVICE !!!!, then we can
	// safely define the IP_INFO_API_KEY after the APP_INITIALIZER has run.
	{
		provide: IP_INFO_API_KEY,
		useFactory: function( appInitializer: AppInitializer ) {

			return( appInitializer.config.ipInfo.apiToken );

		},
		deps: [ AppInitializer ]
	}
];

// Import the core angular services.
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";

// Import the application components and services.
import { AppComponent } from "./app.component";
import { APP_INITIALIZER_PROVIDERS } from "./app.initializer";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@NgModule({
	imports: [
		BrowserModule,
		HttpClientModule
	],
	bootstrap: [
		AppComponent
	],
	declarations: [
		AppComponent
	],
	providers: [
		APP_INITIALIZER_PROVIDERS
	]
})
export class AppModule {
	// ...
}