Injection Token in Angular

The Dependency Injection system in Angular uses tokens to uniquely identify a Provider. There are three types of tokens that you can create in Angular. They are Type Token, String Token, and Injection Token.

DI Tokens

We declare the Provider with providers metadata. This is what it looks like.

The syntax has two properties. provide (provide: ProductService) & provider (useClass: ProductService)

The first property Provide holds the Token or DI Token. The Tokens act like a key. The DI systems need the key to locate provider in the Providers array.

Angular Provider

The Token can be either a type, a string or an instance of InjectionToken.

Type Token

Here the type being injected is used as the token.

For example, we would like to inject the instance of the ProductService, we will use the ProducService as the Token as shown below.

The ProductService is then injected into the component by using the following code.

You can keep the same token (ProductService) and change the class to another implementation of the Product service. For example, in the following code, we change it to BetterProductService.

Angular does not complain if we use the token again. In the following example token ProductService used twice. In such a situation last to register wins (BetterProductService).


String token

You can use the Type token only if you have Type representation. But that is not always the case. Sometimes we must inject simple string values or simple object literal, where there is no type.

We can use string tokens in such a scenario.

The string PRODUCT_SERVICE in the example below is a string token.

You can then use Inject the ProductService using the @Inject method




Problems with the String Tokens

The String tokens are easy to use but prone to error. Two developers can use the same token at different parts of the app. Third-party libraries can also use the same token.

If we re-use the token, the last to register overwrites all previously registered tokens.

String tokens are easier to mistype, making it difficult to track & maintain in big applications. This is where the InjectionToken comes into the picture.

To understand the issue, look at the example app from Stackblitz. The app has two Angular Modules.

One is ProductModule which implements the ProductService and registers it using the string Injection token PRODUCT_SERVICE

The second module is SomeOtherModule which implements a SomeService and registers it with the same string token PRODUCT_SERVICE

In AppComponent we inject the PRODUCT_SERVICE. We want the Product Service to come from our Product Module.

AppModule imports both modules. The Order of import here determines which service is used in our component.

If we place ProductModule last in the import array, the code works correctly. But if we import AnotherModule last, then the code does not work and PRODUCT_SERVICE string injection token will use the service from the AnotherModule.

What is an Injection Token

The Injection Token allows us to create a token to inject the values that don’t have a runtime representation.

It is very similar to string tokens. But instead of using a hardcoded string, we create the Injection Token by creating a new instance of the InjectionToken class. They ensure that the tokens are always unique.

In Angular 4 and prior versions used OpaqueToken. It is now deprecated and replaced by InjectionToken.

Creating an InjectionToken

To create an Injection Token, first, we need to import InjectionToken from @angular/core

Create a new Injection Token APIURL from InjectionToken

The code above creates a new instance of InjectionToken APIURL. We can also specify the optional type parameter, <string>, and the token description, Api.url. Use the token description to specify the token’s purpose.

The code below creates a new injection token without type and an empty string as its description.

Register it in the providers array.

Inject it into the Component.

InjectionToken Example

The following example shows how to use the Injection Token. You can refer to the Stackblitz for the code.






The Injection token ensures that the tokens are always unique. Even if the two libraries use the same name for the Angular Dependency Injection System, inject the right dependency. You can refer to the example application



4 thoughts on “Injection Token in Angular”

  1. Hello,

    Thank you very much for all your articles.

    They are well detailed and very well explained.

    A question for you.

    Why do you use string everywhere ?

    export const APIURL = new InjectionToken(”);
    export const USE_FAKE = new InjectionToken(”);
    export const PRODUCT_SERVICE = new InjectionToken(”);
    export const APP_CONFIG = new InjectionToken(”);

    Because for example, with USE_FAKE you declare : { provide: USE_FAKE, useValue: true }, //the value is a boolean.

    For : export const APP_CONFIG = new InjectionToken(”);

    We can use an interface like :

    export interface IAppConfig {
    apiUrl: string;
    fake: boolean;
    title: string;

    And then :
    export const APP_CONFIG = new InjectionToken(‘AppConfiguration’);
    And :
    @Inject(APP_CONFIG) public Config: IAppConfig

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top