Angular2 DI: Inject a new value on every injection?

Question

I use Angular2 DI to inject a Logger class in various services and components. Is it possible to create and inject a new object every time a Logger is requested? I tried the FactoryProvider; it instantiates a single instance once and then injects the same instance everywhere.

Registering a separate Logger provider for every component would solve this but that seems to be an overkill.

So far I found no better solution but it would make things much more convenient for me.

EXAMPLES

This is my super-convenient goal:

// logger.service.ts
export class Logger {
  static LoggerProvider: FactoryProvider = {
    provide: Logger,
    useFactory: () => {
      return new Logger();
    },
    /* Actually we need a LoggerService here, I omitted that. */
  };
  name: string;
  info(msg: string) { console.log('INFO', this.name, msg); }
}

// status.service.ts
@Injectable()
export class StatusService {
  constructor(private log: Logger) {
    this.log.name = 'StatusService';
    this.log.info('ctor'); // logs "INFO StatusService ctor"
  }
  test() {
    this.log.info('test'); // should log "INFO StatusService test"
  }
}

// home.component.ts
@Component({ /* ... */})
export class HomeComponent {
  constructor(
    private statusService: StatusService 
    private log: Logger,
  ) {
    // Got the same logger as the StatusService!!!
    this.log.name = 'HomeComponent';
    this.log.info('ctor'); // logs "INFO HomeComponent ctor"
    this.statusService.test(); // breaks and logs "INFO HomeComponent test"!!!
  }

}

This could be done now, however, it needs a little more boilerplate:

// status.service.ts
@Injectable()
export class StatusService {
  private log: Logger;
  constructor(loggerService: LoggerService) {
    this.log = loggerService.createLogger('StatusService');
    this.log.info('ctor'); // logs "INFO StatusService ctor"
  }
  test() {
    this.log.info('test'); // definitely logs "INFO StatusService test"
  }
}

MORE UPDATE

Well, I was digging in Angular2 issue tracker and found this guy (#18015) where they argue about a DI extension solving this problem and the way it would affect the whole DI mechanism. It seems that this would be the real solution but there is no conclusion yet. (@bryan60 seems to be right: currently -- 5.0.0-rc.1 -- this is NOT supported.)

Answer 1

It's actually possible to create a Logger every time it is requested. Just think about ActivatedRoute, you will get different instances for different components which under different routes.

The idea is to create a custom injector.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-container-outlet',
  template: '<router-outlet></router-outlet>',
})
export class AppContainerOutletComponent { }


@Directive({
  selector: 'some-root-container',
})
export class AppContainerDirective implements OnInit {
  private content: ComponentRef<any> | null;
  constructor(
    private vcr: ViewContainerRef,
    private cdr: ChangeDetectorRef,
    private resolver: ComponentFactoryResolver,
    private router: Router
  ) { }

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(AppContainerOutletComponent);
    const injector = new ContainerInjector(this.router, this.vcr.injector);
    this.content = this.vcr.createComponent(factory, this.vcr.length, injector);
    this.cdr.markForCheck();
  }
}

class ContainerInjector implements Injector {
  constructor(
    private router: Router,
    private parent: Injector
  ) {}

  get(token: any, notFoundValue?: any): any {
    if (token === Logger) {
      return new Logger(/* You can also pass some parameters to Logger */);
    }

    return this.parent.get(token, notFoundValue);
  }
}

Then just use some-root-container instead of router-outlet(only need to replace the root one). Note that router-outlet is not required in some-root-container actually. You just need to create an component with a custom injector and make everything else be children of the component.

Then, just inject Logger as usual(do not provide it anywhere). You will get a new Logger instance every time.

The shortcoming is that ngOnDestroy on Logger(if it is implemented) will not be called.

Hope that helps.

Answer 2

If a service needs to be instantiated multiple times without specifying it in providers each time, it should be instantiated manually:

...
{ provide: Logger, useValue: Logger }
...

...
constructor(@Inject(Logger) Logger: typeof Logger) {
  this.logger = new Logger();
}
...

If Logger class accepts other dependencies as arguments, they should be provided manually in this case.

In order to inject them automatically, additional service should be provided, like loggerFactory:

export function loggerFactory(foo: Foo, bar: Bar): Logger {
  return () => new Logger(foo, bar);
}

...
{ provide: loggerFactory, useFactory: loggerFactory, deps: [Foo, Bar] }
...

...
constructor(@Inject(loggerFactory) loggerFactory: () => Logger) {
  this.logger = loggerFactory();
}
...

Answer 3

Amazed how few views this question has. You may want to make Logger a generic type, then you can do super clever things with it.

eg. Typescript has very powerful features (may need 2.9 for some of these)

You can make your logger factory return a generic type

export function loggerFactory<LFT>(): (t) => Logger<LFT> 
{
    return (t: LFT) => new Logger(t);
}

The logger itself can use very powerful filtering so you can create members (note this is all at compile time).

type ObservablePropertyNames<T> = { [K in keyof T]: T[K] extends Observable<any> ? never : K }[keyof T];

export class Logger<T>
{
    constructor(public t: T){
        debugger;
    }

    logMember(member: keyof T)
    {
        console.log('value of member' + member, member);
    }

    // TODO: Unsubscribe afterwards!
    watch(member: keyof Pick<T, ObservablePropertyNames<T>>)
    {
       // member is an Observable<T>
       member.subscribe((v) => {
          console.log('member changed to ' + v);
       });
    }
}

To create the logger you have to use the slightly clumsy syntax that includes the component name as a generic parameter type.

@Inject(loggerFactory) loggerFactory:(t) => Logger<FeatureComponent>) {

    const logger = loggerFactory(this);
    logger.logMember('getPortal');  // only compiles if 'getPortal' exists
    logger.watch('layout');  // only compiles if 'layout' is Observable
}

That way if your class changes it'll fail compilation if you are logging things that aren't there anymore.