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
-
-
-
-
-
-
-
-
- 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.