How to inject service into class (not component)

AngularTypescript

Angular Problem Overview


I'd like to inject a service into a class that is not a component.

For example:

Myservice

import {Injectable} from '@angular/core';
@Injectable()
export class myService {
  dosomething() {
    // implementation
  }
}

MyClass

import { myService } from './myService'
export class MyClass {
  constructor(private myservice:myService) {

  }
  test() {
     this.myservice.dosomething();
  }
}

I tried and it doesn't work. It seems like service need to be used in only component or service.

Is there a way to use a service in a normal class? or it's a bad practice to use a service in a normal class.

Thank you.

Angular Solutions


Solution 1 - Angular

Injections only works with classes that are instantiated by Angulars dependency injection (DI).

  1. You need to
  • add @Injectable() to MyClass and
  • provide MyClass like providers: [MyClass] in a component or NgModule.

When you then inject MyClass somewhere, a MyService instance gets passed to MyClass when it is instantiated by DI (before it is injected the first time).

  1. An alternative approach is to configure a custom injector like

constructor(private injector:Injector) { 
  let resolvedProviders = ReflectiveInjector.resolve([MyClass]);
  let childInjector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this.injector);

  let myClass : MyClass = childInjector.get(MyClass);
}

This way myClass will be a MyClass instance, instantiated by Angulars DI, and myService will be injected to MyClass when instantiated.
See also https://stackoverflow.com/questions/40536409/getting-dependency-from-injector-manually-inside-a-directive/40537194#40537194

  1. Yet another way is to create the instance yourself:

constructor(ms:myService)
let myClass = new MyClass(ms);

Solution 2 - Angular

Not a direct answer to the question, but if you're reading this SO for the reason I am this may help...

Let's say you're using [ng2-translate][1] and you really want your User.ts class to have it. You're immediate thought is to use DI to put it in, you are doing Angular after all. But that's kind of overthinking it, you can just pass it in your constructor, or make it a public variable you set from the component (where you presumably did DI it in).

e.g.:

import { TranslateService } from "ng2-translate";

export class User {
  public translateService: TranslateService; // will set from components.
  
  // a bunch of awesome User methods
}

then from some user-related component that injected TranslateService

addEmptyUser() {
  let emptyUser = new User("", "");
  emptyUser.translateService = this.translateService;
  this.users.push(emptyUser);
}

Hopefully this helps those out there like me who were about to write a lot of harder to maintain code because we're too clever sometimes =]

(NOTE: the reason you may want to set a variable instead of making it part of your constructor method is you could have cases where you don't need to use the service, so always being required to pass it in would mean introducing extra imports/code that are never really used)

[1]: https://www.npmjs.com/package/ng2-translate "ng2-translate"

Solution 3 - Angular

This is kind of (very) hacky, but I thought I'd share my solution as well. Note that this will only work with Singleton services (injected at app root, not component!), since they live as long as your application, and there's only ever one instance of them.

First, in your service:

@Injectable()
export class MyService {
    static instance: MyService;
    constructor() {
        MyService.instance = this;
    }
    
    doSomething() {
        console.log("something!");
    }
}

Then in any class:

export class MyClass {
    constructor() {
        MyService.instance.doSomething();
    }
}

This solution is good if you want to reduce code clutter and aren't using non-singleton services anyway.

Solution 4 - Angular

locator.service.ts

import {Injector} from "@angular/core";

export class ServiceLocator {
    static injector: Injector;
}

app.module.ts

@NgModule({ ... })

export class AppModule {
    constructor(private injector: Injector) {
        ServiceLocator.injector = injector;
    }
 }

poney.model.ts

export class Poney {
    
    id: number;
    name: string;
    color: 'black' | 'white' | 'brown';

    service: PoneyService = ServiceLocator.injector.get(PoneyService); // <--- HERE !!!
    
    // PoneyService is @injectable and registered in app.module.ts
}

Solution 5 - Angular

If your service methods are pure functions, a clean way to solve this is to have static members in your service.

your service

import {Injectable} from '@angular/core';
@Injectable()
export class myService{
  public static dosomething(){
    //implementation => doesn't use `this`
  }
}

your class

export class MyClass{
  test(){
     MyService.dosomething(); //no need to inject in constructor
  }
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionElecView Question on Stackoverflow
Solution 1 - AngularGünter ZöchbauerView Answer on Stackoverflow
Solution 2 - AngularRyan CrewsView Answer on Stackoverflow
Solution 3 - AngularKilvesView Answer on Stackoverflow
Solution 4 - AngularJulienView Answer on Stackoverflow
Solution 5 - AngulardasfdsaView Answer on Stackoverflow