Angular Injector, @Injectable & @Inject

The Angular Injector lives at the core of Angular Dependency injection system. In this article we will look at it in more detail. We will also take a look at the @Injectable & @Inject decorators.

Applies to: Angular 2 Injector, Angular 4 Injector, Angular 5 Injector, Angular 6 Injector, Angular 7 Injector

In this article

What is Angular Injector
When is Angular Injector is created
- Registering the service with injector
@Injectable
- Example of Injectable
@Inject

What is Angular Injector

The Angular Injector is responsible instantiating the dependency and injecting into the component or service.

The Injector looks for the dependency in the Angular Providers using the token. The Angular Providers array returns the Provider, which contains the information about how to create the instance of the dependency. The Injector creates the instance and injects it into Component or service.

When is Angular Injector is created

The Angular creates an injector when the application root module (named as AppModule) is bootstrapped. This injector is called as root injector. The root injector has the application wide scope. It acts as parent to all injectors.

Suggested Reading
Angular Bootstrapping Process

Recommended Books:

The Best Books On Angular.

The 8 Best Angular Books, which helps you to get started with Angular.

Angular root module loads the AppComponent. We call this as root component. The AppComponent gets its own injector. This injector created as the child of the root injector.

The Root Component contains all other components. Angular App will create child components under the Root Component. All these child component can have their own child components creating a tree of components. The Angular Injector is also created for all those components creating a Injector tree closely mimicking the component tree.

The Every Injector gets its own copy of Providers.

Registering the service with injector

All the application dependencies are registered with the Providers. The every injector has a Provider associated with it. The Providers metadata of @NgModule, @Component or @Directive is where we register our dependency


providers: [ProductService, LoggerService]

providers: [ProductService, LoggerService]

Where you register your dependency defines the scope of the dependency. The dependency registered with the Module using @NgModule decorator is attached the Root Provider ( Provider attached to the Root Injector). This Dependency is available to entire application.

The dependency registered with the component is available to that component and any child component of that component.

@Injectable

The Injectable is a decorator, which you need to add to the consumer of the dependency. This decorator tells angular that the constructor arguments must be injected using the Angular DI system

Example of Injectable

We created an example application in the Angular Dependency injection tutorial. It had two services LoggerService & ProductService as shown below.

LoggerService


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

@Injectable()
export class LoggerService {
  log(message:any) {
    console.log(message);
  }
}

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

@Injectable()

export class LoggerService {

log(message:any) {

console.log(message);

}

ProductService


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

import {Product} from './Product'
import {LoggerService} from './logger.service'

@Injectable()
export class ProductService{

    constructor(private loggerService: LoggerService) {
        this.loggerService.log("Product Service Constructed");
    }

    public  getProducts() {

        this.loggerService.log("getProducts called");
        let products:Product[];

        products=[
            new Product(1,'Memory Card',500),
            new Product(1,'Pen Drive',750),
            new Product(1,'Power Bank',100)
        ]

        this.loggerService.log(products);
        return products;               
    }
}

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

import {Product} from './Product'

import {LoggerService} from './logger.service'

@Injectable()

export class ProductService{

constructor(private loggerService: LoggerService) {

this.loggerService.log("Product Service Constructed");

}

public getProducts() {

this.loggerService.log("getProducts called");

let products:Product[];

products=[

new Product(1,'Memory Card',500),

new Product(1,'Pen Drive',750),

new Product(1,'Power Bank',100)

]

this.loggerService.log(products);

return products;

}

The ProductService has a dependency on the LoggerService. Hence it is decorated with the @Injectable decorator. Remove @Injectable() from ProductService and you will get the following error.

Uncaught Error: Can’t resolve all parameters for ProductService: (?)

That is because, without DI Angular will not know how to inject LoggerService into ProductService.

Remove @Injectable() from LoggerService will not result any error as the LoggerService do not have any dependency.

The Components & Directives are already decorated with @Component & @Directive decorators. These decorators also tells Angular to use DI, hence you do not need to add the @Injectable().

@Inject

The @Inject() is a constructor parameter decorator, which tells angular to Inject the parameter with the dependency provided in the given token. It is manual way of injecting dependency

In the previous example, when we removed the @Injectable decorator from the ProductService we got an error.

We can manually inject the LoggerService by using the @Inject decorator applied to the parameter loggerService as shown below.

The @Inject takes the Injector token as the parameter. The token is used to locate the dependency in the Providers.


export class ProductService{
    constructor(@Inject(LoggerService) private loggerService) {
        this.loggerService.log("Product Service Constructed");
    }
}

export class ProductService{

constructor(@Inject(LoggerService) private loggerService) {

this.loggerService.log("Product Service Constructed");

}

Angular Dependency Injection

Angular Providers