Angular 2+ Logger Using ng2.logger

In this article, I am going to show you the process to log messages in Angular 2+ applications with examples. Ng2 Logger is a simple logging module for angular 2+ applications. This allows you to log messages based on the log level setup.

To use Ng2 Logger module, first, we have to set up and configure in our Angular 2+ application. Follow the below steps to setup and configure Ng2 Logger module.

Step #1 Ng2 Logger Installation

Execute the below command in the npm console window.

npm install ng2.logger

Once you execute the above command, you can see the Ng2 Logger package in package.json file.

package.json

{
  "name": "office-front-end2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    --------------
    --------------
    --------------
  },
  "private": true,
  "dependencies": {
    --------------
    --------------
    --------------
    "angular2-logger": "^0.6.0",
    --------------
    --------------
    --------------
  },
  "devDependencies": {
    ----------
    ----------
    ----------
  }
}

Step #2 Configuration Options

The available Ng2 Logger configuration options are shown below.

Level - This tells you, how much detail you want to see in the console logs.

• ERROR (1) being the less detailed
• LOG (5) being the most.
• Default optioins is Level.WARN (2).

The Hierarchy of the messages is as follows from highest to lowest priority,

• - Level.OFF
• - Level.ERROR
• - Level.WARN
• - Level.INFO
• - Level.DEBUG
• - Level.LOG

The Logger will log everything with higher or equal priority to the current logger.level set. The app will only log message for that level or higher (OFF disables the logger).

Create one environment file and set it to default logger level based on your need so, that it will be applied throughout the application, which should work like a global configuration file.

Step #3 Configure the default option in the environment file

environment.local.ts

/* File content for the current environment will overwrite these during build. The build system defaults to the dev environment which uses 'environment.local.ts' file, but if you do 'ng build
--env=prod' then 'environment.prod.ts' will be used instead. The list of which environment maps to which file can be found in '.angular-cli.json' file. */

/*
Logger Levels
0-Level.OFF, 1-Level.ERROR, 2-Level.WARN, 3-Level.INFO, 4-Level.DEBUG, 5-Level.LOG
*/

import {Level} from 'angular2-logger/core';

export const environment = {
    production: false,
    sessionStorageKey: 'test',
    sessionTokenName: 'token',
    apiEndpoint: 'http://localhost:12345/',
    apiPrefix: 'api/',
    basePath: '/test/',
    logger: {
        level: Level.LOG
    }
};

Step #4 Configure the Ng2 Logger provider in app.module.ts file

Once the environment file gets created, the next job is to register the Ng2 Logger provider in the app.module.ts file. Here is the sample code.

app.module.ts

---------------
---------------
---------------
import {environment} from "../environments/environment";
import {Logger, Options} from "angular2-logger/core";


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        ---------------
        ---------------
        ---------------
    ],

    providers: [{ provide: Options, useValue:{ level:environment.logger.level,store: false }      }, Logger],
    bootstrap: [AppComponent]
})
export class AppModule {}

Step #5 Create component file

Create component file by importing Ng2 Logger and use the logger. Once you log the message, you can see in the console window.

logger-example.component.ts

import { Component, OnInit } from '@angular/core';
import {Logger} from "angular2-logger/core";
@Component({
  selector: 'sis-logger-example',
  templateUrl: './logger-example.component.html',
})
export class LoggerExampleComponent implements OnInit {
    constructor( private _logger: Logger ){
        this._logger.unstore();
        this._logger.error("Priority level #1 error msg..");
        this._logger.warn("Priority level #2 warning msg..");
        this._logger.info("Priority level #3 warning msg..");
        this._logger.debug("Priority level #4 debug msg..");
        this._logger.log("Priority level #5 log msg.");
    }
  ngOnInit() {
  }
}

logger-example.component.html

<header>
        <h1>Logger Examples and Usage</h1>
</header>
<section id="logger">
</section>

Output

Default Ng2 Level setting

 

Level with Debug off

 

Level with Debug and Info off

 

Level with Debug and Info and Warn off

 

Level with Verbose (Level 4) off

 

Highest Level that is Level 5 set

 

Level completely off

 

I appreciate your valuable feedback. Thank you.