In Angular, dependency injection (DI) is a powerful feature that allows developers to create modular and scalable applications. Dependency injection helps manage and deliver services and values to different parts of an application. Understanding how to configure dependency providers in Angular can help developers effectively manage services, constants, and other values within their applications.

This article will explain configuring dependency providers in Angular, using the latest version's syntax. We’ll explore different provider types, their use cases, and how to implement them in Angular applications.

Configuring Dependency Providers: Specifying a Provider Token

A dependency provider is an identifier used in Angular’s DI system to fetch dependencies. When you specify a service class as the dependency provider token, Angular by default instantiates the class using the new operator.

A provider object is configured to associate tokens with specific values or classes, facilitating the injection of dependencies.

For example, in a component that provides a Logger instance:

src/app/app.component.ts providers: [Logger]

 This is equivalent to configuring it manually using an object literal: 

src/app/app.component.ts [{ provide: Logger, useClass: Logger }]

 In this expanded configuration, the provide property holds the token, and the useClass property tells Angular how to create the service. When the Logger token is injected into a component or service, Angular uses the Logger class to instantiate it.

Class Providers: useClass Syntax

The class provider syntax allows you to substitute the default class with another implementation. This is useful when you need to provide an alternative class, such as for testing or extending behavior.

Here’s an example where BetterLogger is substituted for the default Logger: 

src/app/app.component.ts [{ provide: Logger, useClass: BetterLogger }]

If the alternative class has dependencies, you should also specify those dependencies in the providers array: 

src/app/app.component.ts [ UserService, { provide: Logger, useClass: EvenBetterLogger }, ]

In this case, EvenBetterLogger uses the UserService to personalize log messages: src/app/even-better-logger.component.ts 

src/app/even-better-logger.component.ts
@Injectable()
export class EvenBetterLogger extends Logger {
  constructor(private userService: UserService) {}
  
  override log(message: string) {
    const name = this.userService.user.name;
    super.log(`Message to ${name}: ${message}`);
  }
}

This demonstrates how Logger and UserService are used as tokens for their own class providers, dictating how the relevant services are injected into a factory function for dynamic value creation in dependency injection scenarios. Angular can resolve the UserService dependency since it is provided at the module or component level.

Alias Providers: useExisting

The useExisting provider key is useful when you want to create an alias for an existing service. It maps one token to another, meaning multiple tokens can point to the same instance.

In the following example, OldLogger is an alias for NewLogger, and both tokens refer to the same instance:

 
src/app/app.component.ts
[
  NewLogger,
  { provide: OldLogger, useExisting: NewLogger }
]

It’s important to note that using useClass here would create two separate instances of NewLogger, while useExisting ensures they share the same instance.

Factory Providers: useFactory

The useFactory provider key lets you create a service dynamically by calling a factory function. This is particularly useful when the service’s creation depends on certain runtime conditions.

Factory providers generate dynamic dependency objects, making instances reusable and adaptable throughout the application, especially for scenarios involving user authorization and security-sensitive data.

Consider a scenario where only authorized users should see secret heroes in a HeroService. The HeroService constructor includes a boolean flag to control the display of secret heroes: 

src/app/heroes/hero.service.ts
class HeroService {
  constructor(
    private logger: Logger,
    private isAuthorized: boolean
  ) {}

  getHeroes() {
    const authStatus = this.isAuthorized ? 'authorized' : 'unauthorized';
    this.logger.log(`Fetching heroes for ${authStatus} user.`);
    return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
  }
}

To implement this, you can use a factory provider to inject both Logger and UserService, ensuring that the isAuthorized flag is properly set based on the logged-in user: 

src/app/heroes/hero.service.provider.ts
const heroServiceFactory = (logger: Logger, userService: UserService) =>
  new HeroService(logger, userService.user.isAuthorized);

The provider configuration would look like this:

src/app/heroes/hero.service.provider.ts
export const heroServiceProvider = {
  provide: HeroService,
  useFactory: heroServiceFactory,
  deps: [Logger, UserService]
};

The deps array specifies the dependencies (Logger and UserService), which the injector will resolve and pass to the factory function. This pattern is ideal for scenarios where the dependency’s value might change at runtime or depends on certain conditions.

Value Providers: useValue

The useValue provider key is used to inject static values, known as dependency values, such as configuration settings or feature flags, into your application. This technique is particularly useful for injecting runtime configuration into Angular applications.

For instance, you can use useValue to provide a base URL for an API service:

src/app/api.service.ts
export const API_URL = new InjectionToken<string>('apiUrl');

Then, in your module, you can provide this static value:

src/app/app.module.ts
providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]

You can now inject the value into a service: 

src/app/api.service.ts
export class ApiService {
  constructor(@Inject(API_URL) private apiUrl: string) {}

  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

Using an InjectionToken Object

For non-class dependencies, such as configuration objects or primitive values, you can use the InjectionToken object to provide a unique injection token.

Here’s an example that defines an InjectionToken for an app configuration object:

src/app/app.config.ts
import { InjectionToken } from '@angular/core';

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

You can then register a value for this token in your module:

src/app/app.module.ts
providers: [{ provide: APP_CONFIG, useValue: MY_APP_CONFIG_VARIABLE }]

When injecting the configuration object, you use the @Inject decorator to reference the token:

src/app/app.component.ts
export class AppComponent {
  constructor(@Inject(APP_CONFIG) config: AppConfig) {
    this.title = config.title;
  }
}

This method ensures that Angular can inject objects or values that are not tied to any particular class.

Interfaces and Dependency Injection

One important note about interfaces in Angular is that they do not play a role in DI. While TypeScript interfaces help with design-time type-checking, they are not available at runtime in JavaScript. As such, you cannot use an interface as a provider token.

For example, the following attempt to use an interface as a token will fail:

 
[{ provide: AppConfig, useValue: MY_APP_CONFIG_VARIABLE }]

Interfaces only exist during development and are stripped out during the JavaScript transpilation process, making them unusable as DI tokens.

Conclusion

Configuring dependency providers in Angular offers a flexible approach to managing services, values, and other dependencies in your application. Whether you need to inject classes, alias existing services, provide static values, or dynamically create services using factories, Angular provides a rich set of APIs to help. The expanded provider configuration includes an object literal with properties that define how dependencies are created and managed within the injector, detailing specific provider definitions like useClass, useExisting, useValue, and useFactory.

By mastering provider configurations such as useClass, useExisting, useFactory, and useValue, you can write more efficient, testable, and maintainable Angular applications. The provider definition object is a shorthand that expands into a full provider object, consisting of properties that inform the injector on how to create dependency values. Using tokens like InjectionToken for non-class providers further enhances the flexibility of Angular’s DI system, making it one of the most robust features of the framework.

Recent Articles