ng-logan

NGLOGAN - extended logger service for you angular 2+ app.

Table of contents

1. NgLogan
2. Installation and usage
3. Log levels
4. Usage and API

NgLogan

NgLogan is a library for an angular application that allows to log messages to a debugging console. It helps to debug code and you can easily hide outputs in console before deploying by changing set parameters.

Installation and usage

Set private registry by adding registry=http://npm.pp.ciklum.com/ to your .npmrc file.
Install ng-logan library by running

npm i @ciklum/ng-logan

Service should be configurable from the main application

Configuration

There is opportunity to register the service for root module or for feature module using forRoot() and forChild() methods. In forRoot() method you should pass configurable config with globalTitle: string, title: string, logLevel: string and ignoreLogLevel: boolean params.

Import { NgLoganModule } from "@ciklum/ng-logan"

Add to imports:

imports: [ 
NgLoganModule.forRoot({
globarlTitle: <your_glogal_title>, 
title: <your_local_title>, 
logLevel: <log_level>,
ignoreLogLevel: <ignore_param>
}) ]

• for root module

Add to
imports: [ NgLoganModule.forChild( )] - for feature modules

For example:

    NgLoganModule.forRoot({
      globalTitle: 'My global',
      title: 'My local title',
      logLevel: 'warn',
      ignoreLogLevel: false
    }),

Log levels

NgLoganService supports next types of logLevels:
log
debug
info
warn
error
Every logLevel has value, log and debug has the lowest value, error level has the biggest value. If you set the error logLevel in default config, then only console.error will work and other methods with lower values won't work. If you set the info logLevel in default config, only console.info, console.warn, console.error will work. Default logLevel value is debug.

Usage and API

NgLoganService

If we inject NgLoganService in a component, we get messages in console with title from config.

export class TempComponent implements OnInit {
 
  constructor(private ngLoganService: NgLoganService) { }

  ngOnInit() {
    this.ngLoganService.info('info method')
    this.ngLoganService.warn('warn method')
    this.ngLoganService.error('error method')
  }
}

Result:

// [My global : My local title] warn method
// [My global : My local title] error method

There is an opportunity to change local title for every module that will be desplayed in console messages. Also there is an opportunity to ignore config logLevel.

@Logger decorator

@Logger is a property decorator. It was created for setting local parameters and for easy usage of NgLoganService.

  @Logger() private readonly logger

Then you can use logger property to log some text.

@Logger decorator has next parameters:

title (optional)

The parameter set unique local title for a module. If it is not set, the default title from config is used.

ignoreLogLevel (optional)

If the parameter is not set, by default it is false, the output to the console depends on the logLevel from config. If the parameter is true, it allows to ignore logLevel from config, every method of console will work.

For example:
We have warn logLevel in config.
In the first example we will see the message in console, but in the other example we won't, because in it ignoreLogLevel is not added and it is false by default.

export class AppComponent implements OnInit {
  @Logger({title: 'AppModule', ignoreLogLevel: true}) private readonly logger

  constructor() {}

  ngOnInit() {
    this.logger.info('my text will be in console')
  }
}

Other example

export class NewComponent implements OnInit {
  @Logger({title: 'AppModule'}) private readonly logger 

  constructor() {}

  ngOnInit() {
    this.logger.info("my text won't be in console")
  }
}

Result:

// [My global : AppModule] my text will be in console  

@loganClass and @loganMethod

It's also possible to use NgLoganService with decorators @loganClass or @loganMethod for a class or a method.
Decorator @loganClass consoles the parameters and results of all methods of a class.

@loganMethod consoles the parameters and results of a method for which the decorator is added.
An optional parameter for these decorators is logLevel: @loganClass('error') or @loganMethod('info'). Default logLevel value is debug.

Class decorator example:

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

export class AppComponent implements OnInit {
  @Logger({title: 'AppModule', ignoreLogLevel: true}) private readonly logger

  constructor() {}

  ngOnInit() {
    this.sayHello('Max');
    this.sayBye('Max');
  }

  sayHello(name) {
    return `Hello, ${name}`
  }
  sayBye(name) {
    return `Bye-bye, ${name}`
  }
}

Result:

// [My global : AppModule] AppComponent - sayHello - parameters:  ["Max"]   
// [My global : AppModule] AppComponent - sayHello - results:  Hello, Max     
// [My global : AppModule] AppComponent - sayBye - parameters:  ["Max"]   
// [My global : AppModule] AppComponent - sayBye - results:  Bye-bye, Max  

Method decorator example:

export class TestComponent {
  @Logger({title: 'TempModule', ignoreLogLevel: true}) private readonly logger
 
  @loganMethod('info')
  init(value) {
    return value * value
  }
}

Result:

//  [My global : TempModule] TestComponent - Init - parameters: [5]   
//  [My global : TempModule] TestComponent - Init - results: 25  

If you want to hide all messages in console, change logLevel in config to 'error'.