Angular 2 one service for all app

Question

I need to use logger service in my Angular2 app, but it's rather uncomfortable to write (I'm using ES6 with Angular2):

import { LoggerService } from '../services/logger-service';
...
constructor(@Inject(LoggerService) logger) {
    this.logger = logger;
}

in every component or service where I want to use it. Is there a way to inject LoggerService globally and use anywhere in the app? I haven't found a way to do it.

This is how my logger looks:

import {Injectable} from '~/node_modules/@angular/core';

@Injectable()
export class LoggerService {
    constructor() {
        if (appConfig.dev) {
            this.log = console.log.bind(console);
            this.error = console.error.bind(console);
            this.info = console.info.bind(console);
        } else {
            this.log = this.error = this.info = () => null;
        }
    }
}

And example of component where I want to use it in:

import { Component, Inject } from '~/node_modules/@angular/core';
import { LoggerService } from '../services/logger-service';

@Component({
    'selector': 'activities',
    'template': template,
    'styles': [style]
})
export class ActivitiesComponent {
    constructor(@Inject(LoggerService) logger){
        this.logger = logger;
    }

    someAction() {
        this.logger.log('hello');
    }
}

There are hacks but I think you shouldn't use them and just inject it where you need it. — Günter Zöchbauer, Nov 29 '16 at 18:55
@GünterZöchbauer could you please provide some example? Even if it's hacks way, it can help future reader and me to understand Angular 2 DI styrene better? — kemsbe, Nov 29 '16 at 19:11
@echonax could you please provide an example? may be just a couple of lines, I kinda can't get it right now — kemsbe, Nov 29 '16 at 19:14
I think this was it http://stackoverflow.com/questions/39038791/inheritance-and-dependency-injection/39038814#39038814 I guess there is another one but I didn't find it. — Günter Zöchbauer, Nov 30 '16 at 08:04

score 1 · Accepted Answer · edited May 23 '17 at 10:31

One of the solutions is to use Inheritance if you are going to do the same things inside every component.

Your super class would look like:

export abstract class BaseComponent implements OnInit{

 ls:LoggerService;
 constructor(private injector: Injector){
    console.log("I'm super: inside constructor");
    this.ls = this.injector.get(LoggerService);
    this.ls.logger("Super Class log!");
 }
  ngOnInit(){
    console.log("I'm super, inside OnInit");
  }
}

and then you can initialize your super class inside your child classes constructor like this:

constructor(private injector: Injector) {
    super(injector);
  }

you will again need to write the injector inside constructor everytime (and several other bad reasons as mentioned by @Günter here https://stackoverflow.com/a/39038814/5706293) but if you are going to do the same things with this injectable(logger in your case) I think this will be the best solution.

Full example: http://plnkr.co/edit/7qRjjgPI6XvOAzrKhWbV?p=preview

Angular 2 one service for all app

1 Answers1