Implementing Logger In Angular 4.

Posted By : Ranjan Mondal | 23-Dec-2017

angularjs

Introduction:

Logging is the process of writing log messages during the execution of a program to a central place or console. It allows you to report and show error and warning messages as well as info messages according to environments eg development, staging or production. Even you can turn off logging feature for a specific environment.

Step 1: npm install --save ngx-logger

Step 2: Once installed you need to import our main module, add Following in app.module.ts

// module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

//  **here for Logger
import { NGXLogger } from 'ngx-logger';

// component
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { environment } from './../environments/environment';

// service
import { CustomInterceptorService } from './service/custom-interceptor.service';
import { LoginService } from './service/login.service';
import { DashboardService } from './service/dashboard.service';

// routes
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login'},
  { path: 'login', component: LoginComponent},
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { useHash: true }),

    //  **** here for logger, here you can set levels according to environment
    LoggerModule.forRoot({ level: environment.envName === 'prod' ? NgxLoggerLevel.LOG :
     environment.envName === 'dev' ? NgxLoggerLevel.DEBUG : NgxLoggerLevel.INFO,
     serverLogLevel: NgxLoggerLevel.OFF }),

  ],
  providers: [ CustomInterceptorService, LoginService, DashboardService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private logger: NGXLogger) {
    this.showEnvironment();
  }

  // **** show environment
  showEnvironment() {
    this.logger.warn('Environment : ' + environment.envName);
  }
}
        
Step 3: In Login controller, Add following code.

import { Component, OnInit } from '@angular/core';
import { NGXLogger } from 'ngx-logger';// **** for logger

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private logger: NGXLogger) { } // ***** injecting logger in component.

  ngOnInit() {
    // **** show which level is running.
    this.logger.debug('debug');
    this.logger.info('info');
    this.logger.log('log');
  }

}

Step 4: In command prompt, by typing following commmand level equal and greator than will activate.

eg, for dev, type :: ng serve --env=dev Levels activated = DEBUG|INFO|LOG|WARN|ERROR

for stag, type :: ng serve --env=stag Levels activated = INFO|LOG|WARN|ERROR

for prod, type :: ng serve --env=prod Levels activated = LOG|WARN|ERROR

Thanks,
I hope this will be helpful.