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


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


And then log messages in your components like this


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


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?

  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”;


    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.
    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;
    case “ERROR”:
    this.log.level = this.logger.Level.ERROR;
    case “WARN”:
    this.log.level = this.logger.Level.WARN;
    case “INFO”:
    this.log.level = this.logger.Level.INFO;
    case “DEBUG”:
    this.log.level = this.logger.Level.DEBUG;
    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’;

    export class LoggerProvider extends Logger {
    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 e-mail address will not be published. Required fields are marked *