Angular2 - Use Dependency Injection outside Components

Question

In my app I use DI to pass information about the UserLogged around the different Components that need such info. This means that I have a main.ts class like this

import {AppComponent} from './app.component';
import {UserLogged} from './userLogged'

bootstrap(AppComponent, [UserLogged]);

and the components that need to use the instance of UserLogged have a constructor like this

constructor(private _user: UserLogged)

Now I would like to use the same instance of UserLogged also in simple TypeScript classes (which are not @Component). Is this possible? In other words, can I get hold of the same instance of UserLogged injected by DI also if I am outside a @Component?

Günter Zöchbauer · Answer 1 · 2017-03-14T21:20:29.330

This constructor also works for services (other classes created by DI)

 bootstrap(AppComponent, [OtherClass, UserLoggged]);

 @Injectable()
 export class UserLogged {
   log(text) {
     console.log(text);
   }
 }

 @Injectable()
 export class OtherClass {
   constructor(private _user: UserLogged) {}
 }

 class SomeComponent {
   constructor(private otherClass:OtherClass) {
     this.otherClass._user.log('xxx');
   }
 }

If you create these classes using new SomeClass() then you can inject it like

 class SomeComponent {
   constructor(private _injector:Injector) {
     let userLog = this._injector.get(UserLogged);
     new SomeClass(userLog);
   }
 }

Timothy Zorn · Answer 2 · 2018-01-15T07:46:54.020

In the file where you bootstrap angular:

import { AppComponent } from './app.component';
import { UserLogged } from './userLogged';

declare global {
    var injector: Injector;
}

bootstrap(AppComponent, [UserLogged]).then((appRef) => {
    injector = appRef.injector;
});

In your other file:

import { UserLogged } from '../path/to/userLogged';

class TestClass {
    private userLogged: UserLogged;

    constructor() {
        this.userLogged = injector.get(UserLogged);
    }
}

score 0 · Answer 3 · edited May 23 '17 at 11:55

To be able to use dependency injection in classes you need to have a decorator, the @Injectable one.

@Injectable()
export class SomeClass {
  constructor(private dep:SomeDependency) {
  }
}

The name Injectable isn't really self-explanatory. It's to make possible the injection within the class (and not into another class).

The provider for the SomeDependency class need to be visible from the component that initiates the call.

See this question for more details about dependency injection and hierarchical injectors:

What's the best way to inject one service into another in angular 2 (Beta)?

Pratik Kelwalkar · Answer 4 · 2016-04-07T12:39:11.900

Im taking a wild guess here, but do you mean to say you want to Inject the class with having to use providers : [UserLogged] ? If that is the case, this will work

providers: [ provide(UserLogged, {useClass: UserLogged} ]

add the above to your bootstrap and you are good to go when you 'do not want to use @Component'

sample.ts

export class Sample{
   constructor(private ulog : UserLogged){}
}

In your case the bootstrap would be :

import {provide}   from   'angular2/core';
import {HTTP_PROVIDERS}   from  'angular2/http';
bootstrap(AppComponent,[HTTP_PROVIDERS,provide(UserLogged, { useClass : UserLogged})]);

Ive added the HTTP_PROVIDERS to demonstrate how to add multiple providers. Cheers!

Angular2 - Use Dependency Injection outside Components

4 Answers4