Implementing A $log-Inspired Logging Service In Angular 2 RC 4

// Define the interface that all loggers must implement.
export interface ILogger {
	assert( ...args: any[] ) : void;
	error( ...args: any[] ) : void;
	group( ...args: any[] ) : void;
	groupEnd( ...args: any[] ) : void;
	info( ...args: any[] ) : void;
	log( ...args: any[] ) : void;
	warn( ...args: any[] ) : void;
}


// Set up the default logger. The default logger doesn't actually log anything; but, it
// provides the Dependency-Injection (DI) token that the rest of the application can use
// for dependency resolution. Each platform can then override this with a platform-
// specific logger implementation, like the ConsoleLogService (below).
export class Logger implements ILogger {

	public assert( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

	public error( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

	public group( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

	public groupEnd( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

	public info( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

	public log( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

	public warn( ...args: any[] ) : void {
		// ... the default logger does no work.
	}

}

// Import the core angular services.
import { bootstrap } from "@angular/platform-browser-dynamic";

// Import the application components and services.
import { AppComponent } from "./app.component";
import { ConsoleLogService } from "./log.service";
import { Logger } from "./default-log.service";

bootstrap(
	AppComponent,

	// In the browser platform, we're going to use the ConsoleLogService as the
	// implementation of the Logger service. This way, when application components
	// inject "Logger" DI token, they'll actually receive "ConsoleLogService".
	[
		{
			provide: Logger,
			useClass: ConsoleLogService
		}
	]
);

// Declare the console as an ambient value so that TypeScript doesn't complain.
declare var console: any;

// Import the application components and services.
import { ILogger } from "./default-log.service";


// I log values to the ambient console object.
export class ConsoleLogService implements ILogger {

	public assert( ...args: any[] ) : void {

		( console && console.assert ) && console.assert( ...args );

	}


	public error( ...args: any[] ) : void {

		( console && console.error ) && console.error( ...args );

	}


	public group( ...args: any[] ) : void {

		( console && console.group ) && console.group( ...args );

	}


	public groupEnd( ...args: any[] ) : void {

		( console && console.groupEnd ) && console.groupEnd( ...args );

	}


	public info( ...args: any[] ) : void {

		( console && console.info ) && console.info( ...args );

	}


	public log( ...args: any[] ) : void {

		( console && console.log ) && console.log( ...args );

	}


	public warn( ...args: any[] ) : void {

		( console && console.warn ) && console.warn( ...args );

	}

}

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

// Import the application components and services.
import { Logger } from "./default-log.service";

@Component({
	selector: "my-app",
	template:
	`
		<ul>
			<li><a (click)="test( 'log' )">Log something.</a></li>
			<li><a (click)="test( 'error' )">Error something.</a></li>
			<li><a (click)="test( 'info' )">Info something.</a></li>
			<li><a (click)="test( 'warn' )">Warn something.</a></li>
			<li><a (click)="testGroup()">Group something.</a></li>
		</ul>
	`
})
export class AppComponent {

	private logger: Logger;


	// I initialize the component.
	// --
	// NOTE: Even though we are requesting the class of TYPE "Logger", we're actually
	// going to receive the instance of ConsoleLogService since that is being overridden
	// at the platform level (ie, in the bootstrapping).
	constructor( logger: Logger ) {

		this.logger = logger;

	}


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


	// I test the basic log levels of the logger.
	public test( level: string ) : void {

		this.logger[ level ]( "Dang, logService.%s() is kind of cool!", level );

	}


	// I test the grouping of log output.
	public testGroup() : void {

		this.logger.group( "Group Test" );
		this.logger.log( "Inside a group." );
		this.logger.error( "Inside a group." );
		this.logger.info( "Inside a group." );
		this.logger.warn( "Inside a group." );
		this.logger.groupEnd();

	}

}