Logging with angular2-logger in Ionic 2 apps

As far as I am aware Ionic 2 does not yet have any decent logging options. But as Ionic 2 uses AngularJS 2, we can make use of the angular2-logger module

Angular2-logger is a Log4j inspired logger for Angular 2 apps allowing you to set your desired log level (OFF, WARN, ERROR, LOG, DEBUG etc)

I’ve found it best to implement the angular2-logger as a provider in Ionic 2 apps and inject it into  your classes rather than instantiating a new instance of the logger for each component in your app.

Once you have the npm module installed, create a LoggerService provider in your app with the following ionic command:

ionic g provider LoggerService

then add the following code to the generated logger-service.ts file

https://gist.github.com/077e6777afc172b482b0115eb0bc785d

I’m configuring my log level using a config class but you can change the code above to use your own preferred method.

Now you can inject the LoggerService into your component’s like so

https://gist.github.com/6cf99c2854c25c591ef3c38b0b0c86ec

And then log messages in your components like this

https://gist.github.com/ed2196a29c2007193a2ff615a9189478

And add the following references and providers to your app.component.ts file

https://gist.github.com/1298ce006a4bdbd0990224d84931aebf

Now say goodbye to your console.log naffness for good 🙂

Help other people find this

13 Responses to “Logging with angular2-logger in Ionic 2 apps”

  1. Sahil Daga says:

    Is there a way to write these log to an external file or it is just for console ??

  2. Oscar Garcia says:

    Mark, thanks for the post, it is very useful. Unfortunately I was unable to make it works. When I log a message I got an error message like this one:

    error opening ws message: {“category”:”console”,”type”:”log”,”data”:[“Log level is “,4]}

    Do you have any clue of what could be wrong?
    Thanks!

  3. Timofeysie says:

    What does your Config class look like?

  4. WH says:

    Thx! Maybe helpful for the reader: I needed to add

    import {LoggerService} from ‘./logger-service’;
    import {Logger} from “angular2-logger/core”;

    @Component({

    providers: [… LoggerService, Logger]
    })

    to my app.component.ts to make it resolve dependencies…

  5. LG says:

    Has anyone tried this with an Ionic 2 app in Visual Studio 2017?
    I have followed the above instructions but keep getting following error during Ionic: Build stage:-
    [16:35:44] typescript: …dio/Projects/CordovaAppsSolution/SampleIndexedDB/src/providers/logger-service.ts, line: 17
    Cannot find name ‘LoggerService’.

    Below is full content of my logger-service.ts file
    import { Injectable } from ‘@angular/core’;
    import ‘rxjs/add/operator/map’;
    import { Logger } from ‘angular2-logger/core’;
    import * as Config from ‘../app/config’;

    /*
    Generated class for the LoggerService provider.

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html
    for more info on providers and Angular 2 DI.
    */
    @Injectable()
    export class LoggerService {

    public log: Logger;

    constructor(public logger: Logger) {
    this.log = this.logger;
    // Set the log level using the config value
    switch (Config.data.LogLevel) {
    case “OFF”:
    this.log.level = this.logger.Level.OFF;
    break;
    case “ERROR”:
    this.log.level = this.logger.Level.ERROR;
    break;
    case “WARN”:
    this.log.level = this.logger.Level.WARN;
    break;
    case “INFO”:
    this.log.level = this.logger.Level.INFO;
    break;
    case “DEBUG”:
    this.log.level = this.logger.Level.DEBUG;
    break;
    default:
    this.log.level = this.logger.Level.LOG;
    }
    console.log(“Log level is “, this.log.level);
    }

    }

  6. LG says:

    The error seems to be at line:

    export class LoggerService {
    public log: Logger;

    It cannot find Logger.

  7. Rodney Joyce says:

    FYI I am using the latest Angular-logger and Ionic 2 and it always throws an error when I build in Prod/release mode until I remove the angular2-logger package. I cannot get it to work… at least I made a loggerService so plugging in another wont be difficult.

    EXCEPTION: Uncaught (in promise): Error: No provider for t!
    Error: DI Error
    at new Error (native)
    at Error.v (file:///android_asset/www/build/polyfills.js:3:4864)

  8. Atanu Mallick says:

    I have extended Logger to my logger-service that simplifies the code inside service and calling the logger methods.

    import { Injectable } from ‘@angular/core’;
    import { Logger } from “angular2-logger/core”;
    import * as config from ‘../../app/config’;

    @Injectable()
    export class LoggerProvider extends Logger {
    constructor(){
    super();
    this.level = this.Level[config.data.LogLevel];
    console.log(“Log level is “, this.level);
    }

    }

    After injecting the LoggerService in my component I called the log methods like

    constructor(private logger: LoggerService){
    this.logger.info(“This is my customized method!”);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *