console-log-service

Simple logging facade for Angular 7 supporting build-time environment specific options and, most importantly, AOT. Use it as-is, or as a base to build out your own logging needs.

Installation

To install this library, run:

$ npm install console-log-service --save

You can configure the logger via the module's forRoot function by passing a function that produces an Options object. Reasoning for this is so that you can have environment specific options, IE those that rely on something like Webpack defines or some other mechanism that injects globals into your code at build time, and still be ok with Angular's AOT compiler.

The code is heavily inspired by other loggers for Angular, but this one is packaged properly according to the Angular guidelines and works with AOT.

Import and configure it:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the module and model classes.
import {ConsoleLogServiceModule, LogLevel, Options} from 'console-log-service';

export function ConsoleLogOptions(): Options {
  if (ENV === 'production') {
    return {
            logLevel: [LogLevel.Warning, LogLevel.Error],
            infoStyle: 'background-color:green; color: white; font-weight:bold;padding:5px',
            debugStyle: 'background-color:blue; color: white; font-weight:bold;padding:5px',
            warningStyle: 'background-color:orange; color: black; font-weight:bold;padding:5px',
            errorStyle: 'background-color:red; color: black; font-weight:bold;padding:5px'
    };
  }
  if (ENV === 'development') {
    return { logLevel: [LogLevel.Info,LogLevel.Debug,LogLevel.Warning,LogLevel.Error] };
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ConsoleLogServiceModule.forRoot(ConsoleLogOptions),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use it:

import { Injectable } from '@angular/core';
import { ConsoleLogService } from 'console-log-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private log:ConsoleLogService ) {
    this.log.info('Here is a info statement');
    this.log.debug('Here is a info statement');
    this.log.warn('Here is a info statement');
    this.log.error('Here is a info statement');
  }
  
}

License

Do whatever you want, it's like 15 lines of code.

Result