Configuring A Service With Both Dependency-Injection And A Run Block In Angular 2.1.1

// Import the core angular services.
import { Inject } from "@angular/core";
import { OpaqueToken } from "@angular/core";

// Import the application components and services.
import { IGreetTransformer } from "./transformers";


// I am the dependency-injection token that can be used to aggregate greet transformers.
// This is the collection that will be injected into the Greeter class during application
// bootstrapping. This kind of "multi" collection replaces the concept of a configuration
// phase in Angular 1.
export var GREETER_TRANSFORMERS = new OpaqueToken( "Injection token for Greet transformers." );


// I provide a service for generating greeting messages.
export class Greeter {

	private transformers: IGreetTransformer[];


	// I initialize the service.
	constructor( @Inject( GREETER_TRANSFORMERS ) transformers: IGreetTransformer[] ) {

		this.transformers = transformers;

	}


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


	// I add the given transformer to the greeter, if it's not already in use.
	public addTransformer( newTransformer: IGreetTransformer ) : void {

		if ( ! this.hasTransformer( newTransformer ) ) {

			this.transformers.push( newTransformer );

		}

	}


	// I return the greeting for the given name.
	public greet( name: string ) : string {

		var greeting = this.transformers.reduce(
			( reduction: string, transformer: IGreetTransformer ) : string => {

				return( transformer.transform( reduction ) );

			},
			name
		);

		return( greeting );

	}


	// I determine if the given transformer is being used by the greeter.
	public hasTransformer( transformer: IGreetTransformer ) : boolean {

		return( this.transformers.includes( transformer ) );

	}

}

// Import the core angular services.
import { NgModule } from "@angular/core";

// Import the application components and services.
import { CoreGreetTransformer } from "./transformers";
import { Greeter } from "./greeter";
import { GREETER_TRANSFORMERS } from "./greeter";

// "Barrel" exports.
// --
// NOTE: Traditionally, this kind of exporting of the "public" values from a module is
// done in a "barrel" file (ie, index.ts). However, in order to keep this demo smaller,
// I'm co-opting the Module file to play double-duty as both the module and the "barrel".
export { Greeter } from "./greeter";
export { GREETER_TRANSFORMERS } from "./greeter";
export { IGreetTransformer } from "./transformers";

@NgModule({
	providers: [
		Greeter,

		// When Angular instantiates the Greeter class, it's going to inject this
		// collection of Transformers. By default, the Greeter module is configured to
		// supply the one "core" Transformer. However, the application at large can
		// easily add to this "multi" dependency collection.
		{
			provide: GREETER_TRANSFORMERS,
			multi: true,
			useClass: CoreGreetTransformer
		}
	]
})
export class GreeterModule {
	// ... nothing to do here.
}

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

// Import the application components and services.
import { AppComponent } from "./app.component";
import { ComplimentTransformer } from "./app-transformers";
import { Greeter } from "./greeter/greeter.module";
import { GreeterModule } from "./greeter/greeter.module";
import { GREETER_TRANSFORMERS } from "./greeter/greeter.module";
import { YellingTransformer } from "./app-transformers";

@NgModule({
	bootstrap: [ AppComponent ],
	imports: [ BrowserModule, GreeterModule ],
	providers: [
		// As part of the Greeter "configuration", we can setup a collection of
		// Transformers to be injected into the Greeter as part of the instantiation
		// process. In this way, we are replacing the Angular 1 "configuration phase"
		// with dependency-injection mechanics.
		{
			provide: GREETER_TRANSFORMERS,
			multi: true, // <-- This creates an array for a single injectable.
			useClass: ComplimentTransformer
		},


		// However, configuration is NOT AN EITHER-OR CONCEPT. We can configure a
		// service using dependency-injection (above); but, we can also, at the very
		// same time, use a run-block to call methods on instantiated services as the
		// last step prior to running the application.

		// This is the transformer that we want to add to our Greeter service. In order
		// to make it available in the "run block", we have to "provide" it so that
		// Angular can instantiate it as a dependency.
		YellingTransformer,

		// Now, let's create a "run block" that will inject the above YellingTransformer
		// into the already-instantiated Greeter service.
		{
			provide: APP_INITIALIZER,
			multi: true,
			deps: [ Greeter, YellingTransformer ],
			useFactory: function( greeter: Greeter, yellingTransformer: YellingTransformer ) : () => void {

				return( runblock );

				function runblock() : void {

					greeter.addTransformer( yellingTransformer );

				};

			}
		}
	],
	declarations: [ AppComponent ]
})
export class AppModule {
	// ... nothing to do here.
}

// Import the core angular services.
import { Component } from "@angular/core";

// Import the application components and services.
import { Greeter } from "./greeter/greeter.module";


@Component({
	selector: "my-app",
	template:
	`
		<em>Look in the console to see the Greeter result.</em>
	`
})
export class AppComponent {

	// I initialize the component.
	constructor( greeter: Greeter ) {

		console.group( "Testing Greeter" );
		console.log( greeter.greet( "Tricia" ) );
		console.groupEnd();

	}

}