@nsalaun/ng-logger

ng-logger

ng-logger is a simple Angular logger service that responds to two needs :

• A log level system to be able to disable certain calls as needed. We do not want to see our debug trace on production.
• A logger that keeps trace of the original log call. We do not want all our logs to be referenced in some logger.service.js all the time.

This package is compatible with Angular 12 and above, Angular AoT compiler and Angular CLI.

Installation

1 - Install the npm package.

npm install --save @nsalaun/ng-logger

2 - Import NgLoggerModule in your application and use forRoot(level: Level) to choose your log level :

import { NgModule }              from '@angular/core';
import { BrowserModule }         from '@angular/platform-browser';
import { AppComponent }          from './app.component';
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
     
@NgModule({
    imports:      [ BrowserModule, NgLoggerModule.forRoot(Level.LOG) ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
})
export class AppModule { } 

3 - Loading

Using SystemJS configuration

System.config({
    map: {
        '@nsalaun/ng-logger': 'node_modules/@nsalaun/ng-logger/bundles/nsalaun-ng-logger.umd.js'
    }
});

Angular-CLI

No need to set up anything, just import it in your code.

Rollup or webpack

No need to set up anything, just import it in your code.

Plain JavaScript

Include the umd bundle in your index.html:

<script src="node_modules/@nsalaun/ng-logger/bundles/nsalaun-ng-logger.umd.js"></script>

and use global nsalaun.ngLogger namespace.

AoT compilation

The library is compatible with AoT compilation. Because of the new metadata version with Angular 5, the library is not compatible with previous Angular version.

Usage

Basic Usage

Inject the Logger service anywhere you need it and use it like it's console :

@Component({})
export class MyComponent(){

    constructor(private logger: Logger){
    
        this.logger.log('Hello !', "It's working :)");
        
    }
}

The service offer a sub-list of window.console capacities :

• Basics :

  • log(...args: any[]) - Outputs a message to the Web Console.
  • debug(...args: any[]) - Outputs a debugging message to the Web Console.
  • info(...args: any[]) - Outputs an informational message to the Web Console.
  • warn(...args: any[]) - Outputs a warning message to the Web Console.
  • error(...args: any[]) - Outputs an error message to the Web Console.

• Groups :

  • group(groupTitle: string) - Creates a new inline group in the Web Console log.
  • groupCollapsed(groupTitle: string) - Creates a new inline group in the Web Console log that is initially collapsed.
  • groupEnd() - Exits the current inline group in the Web Console.

• Time :

  • time(timerName: string) - Starts a timer you can use to track how long an operation takes. It works only with log Level equal or higher than DEBUG.
  • timeEnd(timerName: string) - Stops a timer that was previously started by calling Logger.time(). It works only with log Level equal or higher than DEBUG.

Using different log level on developpment or production

To set a different log level depending on environment, you can proceed as follows:

import { NgModule, isDevMode }   from '@angular/core';
import { BrowserModule }         from '@angular/platform-browser';
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
import { AppComponent }          from './app.component';

// Set different log level depending on environment.
const LOG_LEVEL = Level.LOG;
if (!isDevMode()) {
    const LOG_LEVEL = Level.ERROR;
}
 
@NgModule({
    imports     : [ BrowserModule, NgLoggerModule.forRoot(LOG_LEVEL) ],
    declarations: [ AppComponent ],
    bootstrap   : [ AppComponent ],
})
export class AppModule { } 

Please note this method is one among others. It may not suit your projects requirements/constraints

License

© 2017-2021 Noémi Salaün

MIT