Angular Dependency Injection with Objects and Injection Tokens: A Tree-Shakable Approach

Dependency Injection (DI) is a fundamental concept in Angular, allowing you to provide dependencies to components, services, and other elements in a flexible and testable way. When working with configurations, constants, or objects that need to be injected, Angular’s DI system offers a powerful tool: Injection Tokens. By using Injection Tokens and tree-shakable configurations, you can keep your code clean, modular, and optimized. This article explores how to use objects and Injection Tokens in Angular’s DI system, with a focus on tree-shakable design.

What are Injection Tokens?

In Angular, Injection Tokens are unique identifiers for dependency injection. While services are usually identified by their class types, there are cases where injecting non-class objects or constants (e.g., configuration settings or constant values) is necessary. Injection Tokens solve this by providing a unique symbol that Angular can use to locate and inject dependencies.

For example, you might need to provide API URLs, default settings, or configuration objects across the application. Injection Tokens help with such use cases by serving as named tokens for these objects.

Creating Injection Tokens in Angular

Angular provides the InjectionToken class to create unique tokens for non-class dependencies. Here’s how to create and use an Injection Token in your application.

Example: Creating an Injection Token for API Configuration

typescriptCopy codeimport { InjectionToken } from '@angular/core';
export const API_CONFIG = new InjectionToken<string>('API_CONFIG');

In this example, we create an InjectionToken called API_CONFIG to inject an API URL or configuration. You can use Injection Tokens for more complex configurations, like objects or functions, by defining them with a specific type.

Adding Type Safety with Injection Tokens

Angular’s Injection Tokens can also be typed, making DI more type-safe. Here’s an example of defining a configuration object with typing:

typescriptCopy codeexport interface ApiConfig {
  baseUrl: string;
  apiKey: string;
}
export const API_CONFIG = new InjectionToken<ApiConfig>('API_CONFIG');

This approach helps maintain type safety throughout the application, improving code readability and reducing potential bugs.

Providing Injection Tokens at the Root Level (Tree-Shakable)

To make Injection Tokens tree-shakable, you should provide them at the root level using the providedIn syntax. Here’s how:

typescriptCopy codeimport { Injectable, InjectionToken } from '@angular/core';
export const API_CONFIG = new InjectionToken<ApiConfig>('API_CONFIG', {
  providedIn: 'root',
  factory: () => ({
    baseUrl: 'https://api.example.com',
    apiKey: 'my-api-key'
  })
});

Here’s what happens in this example:

1. Tree Shakable: The providedIn: 'root' option makes API_CONFIG tree-shakable. If the token isn’t used anywhere in the app, Angular’s build optimizer will remove it during tree shaking, optimizing the final bundle size.
2. Factory Function: The factory function provides a default value for the token. This function runs only if the token is injected somewhere in the app, making the configuration tree-shakable.

Injecting Objects with Injection Tokens

Once an Injection Token is created and provided, you can inject it into components, services, or modules as you would with any other Angular service.

Example: Injecting API Configuration into a Service

typescriptCopy codeimport { Inject, Injectable } from '@angular/core';
import { API_CONFIG, ApiConfig } from './api.config';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(@Inject(API_CONFIG) private config: ApiConfig) {
    console.log(`API Base URL: ${this.config.baseUrl}`);
  }
  // Use the API configuration for HTTP requests or other logic
}

In this example, the ApiService has access to the API_CONFIG token and can use it to get configuration values for making HTTP requests or other operations.

Use Cases for Injection Tokens with Objects

Injection Tokens are particularly useful in scenarios where:

1. Environment-Specific Configurations: Use tokens to inject different configurations based on the environment (e.g., development, staging, production).
2. Third-Party Integrations: Manage settings for third-party integrations (e.g., Firebase, Google Analytics) without hard-coding them.
3. Feature-Specific Options: Provide feature flags or options specific to a particular feature module.

By leveraging Injection Tokens, you can keep your application configurable and modular.

Tree-Shakable Injection Tokens in Lazy-Loaded Modules

If you want an Injection Token to be available only in a specific lazy-loaded module, you can provide it in the module’s providers array. This limits the token to that module’s scope, enhancing modularity and reducing unnecessary memory usage.

Example: Providing Injection Tokens in a Lazy-Loaded Module

typescriptCopy code@NgModule({
  providers: [
    {
      provide: API_CONFIG,
      useValue: { baseUrl: 'https://api.lazymodule.com', apiKey: 'lazy-module-key' }
    }
  ]
})
export class LazyModule { }

With this configuration, API_CONFIG will be available only in LazyModule and any of its child components or services, keeping it isolated from the rest of the app.

Factory-Based Injection Tokens for Dynamic Configurations

Sometimes, a simple useValue might not be sufficient for dynamic configurations. In such cases, you can use useFactory to create an Injection Token with custom logic, including other dependencies in its factory function.

Example: Dynamic Configuration with useFactory

typescriptCopy codeexport const API_CONFIG = new InjectionToken<ApiConfig>('API_CONFIG', {
  providedIn: 'root',
  factory: () => {
    const baseUrl = environment.production ? 'https://prod.api.com' : 'https://dev.api.com';
    return {
      baseUrl,
      apiKey: environment.apiKey
    };
  }
});

Here, the factory function provides different configurations based on the environment. This setup allows for a flexible configuration setup, adjusting settings based on deployment context.

Injection Tokens vs. Traditional Providers

While Injection Tokens are useful for injecting objects, constants, and configuration values, there are cases where traditional providers might be more appropriate. Here’s a quick comparison:

• Use Injection Tokens when you need to inject non-class-based dependencies, like configuration objects, primitive values, or constants.
• Use Traditional Providers (such as useClass) for services, especially when dependency injection and class-based behavior are needed.

Injection Tokens are not a replacement for traditional providers but a complementary tool to cover scenarios beyond classes and services.

Best Practices for Using Injection Tokens with Objects

1. Use Type Safety: Define types for Injection Tokens whenever possible to improve code clarity and prevent runtime errors.
2. Tree Shake Where Possible: Use providedIn: 'root' or providedIn: 'any' to leverage tree shaking for unused tokens, reducing the final bundle size.
3. Limit Scope with Module-Level Providers: Provide Injection Tokens at the module level when they are only needed in specific lazy-loaded modules or feature modules. This keeps your dependency tree cleaner and more efficient.
4. Avoid Duplicates: Avoid creating duplicate tokens for the same configuration values, as this can lead to confusion and unnecessary code.
5. Use Factory Functions for Dynamic Configurations: When configurations vary across environments or require dynamic values, use a factory function to generate the token’s value.

Common Pitfalls to Avoid with Injection Tokens

While Injection Tokens are highly useful, there are a few common mistakes to avoid:

1. Not Declaring Types: Injection Tokens without types can lead to runtime errors, as Angular won’t provide type checking.
2. Unintended Scope Sharing: Providing an Injection Token at the root level when it’s only needed in a specific module or component can lead to unnecessary memory usage.
3. Overusing Tokens: Injection Tokens are great for constants and configurations, but they aren’t necessary for standard services. Use traditional providers for typical service injection.
4. Factory Function Overhead: If a factory function is too complex, consider simplifying it or refactoring to avoid potential maintenance issues.

Conclusion

Injection Tokens are an essential part of Angular’s Dependency Injection system, offering a powerful way to inject objects, constants, and configurations. By leveraging tree-shakable providers, you can create modular, efficient, and environment-specific configurations. Using typed Injection Tokens with providedIn: 'root' or providedIn: 'any' improves the scalability of your application, while factory functions provide dynamic configurations where needed.

Understanding and correctly implementing Injection Tokens will help keep your Angular applications lean, flexible, and optimized for performance.