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 in with providers metadata. This is how it looks like.

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

The first property is Provide holds the Token or DI Token. The Tokens act like a key. The DI systems need the key to locate the 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).

Stackblitz

String token

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

We can use string tokens in such a scenario.

Example

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

Example:

Stackblitz

Code

Problems with the String Tokens

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

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

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

To understand the issue take a 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 come from the our Product Module.

AppModule imports both the 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 creating token that allows the injection of 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 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

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

token.ts

app.module.ts

Stackblitz

app.component.ts

Code

The Injection token ensures that the tokens are always unique. Even if the two libraries use the same name for Angular DI injection system is correctly inject the right dependency. You can refer to the example application

Reference

InjectionToken

3 thoughts on “Injection Token in Angular”

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