{"id":2347,"date":"2025-09-25T12:54:31","date_gmt":"2025-09-25T12:54:31","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=2347"},"modified":"2026-02-05T11:59:05","modified_gmt":"2026-02-05T11:59:05","slug":"angular-injectiontoken-type-safe-configuration-objects","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/angular-injectiontoken-type-safe-configuration-objects\/","title":{"rendered":"How can you Use an InjectionToken to Provide type-safe, tree-shakable Configuration Objects?"},"content":{"rendered":"\n

InjectionToken is Angular’s way of creating a unique, type-safe key for non-class dependencies. It ensures that Angular knows exactly what you’re injecting, even if it’s a plain object or a configuration interface. This helps you overcome the fragility of strings which improves clarity across your codebase.<\/p>\n\n\n\n

The Problem with String-Based Providers<\/h2>\n\n\n\n

If you\u2019re using strings as keys to inject configurations, you\u2019re setting yourself up for maintenance nightmares. One typo, and things silently break. That approach also makes it harder for TypeScript to validate anything at compile time.<\/p>\n\n\n\n

Meet InjectionToken: A Smarter Way to Inject Config<\/h2>\n\n\n\n

InjectionToken is Angular’s way of creating a unique, type-safe key for non-class dependencies. It ensures that Angular knows exactly what you’re injecting, even if it’s a plain object or a configuration interface. This helps you overcome the fragility of strings which improves clarity across your codebase.<\/p>\n\n\n\n

How It Works in Practice<\/h3>\n\n\n\n

Let\u2019s say you want to inject an API configuration across multiple services. Instead of manually passing objects or importing shared constants, you define a typed token at one place, and Angular handles the rest via its DI system. Once set up, any service can inject this configuration using that token, without worrying about types or typos.<\/p>\n\n\n\n

\u00a0Practical Example (Type-safe API configuration):<\/h2>\n\n\n\n

Step 1: Create the Token<\/h3>\n\n\n\n
\/\/ api-config.token.ts\nimport { InjectionToken } from '@angular\/core';\n \nexport interface ApiConfig {\n  baseUrl: string;\n  apiKey: string;\n}\n \nexport const API_CONFIG = new InjectionToken<ApiConfig>('api.config', {\n  providedIn: 'root',\n  factory: () => ({\n\t\/\/ Default or environment-based configuration\n\tbaseUrl: 'https:\/\/api.default.com',\n\tapiKey: 'default_key'\n  })\n});<\/code><\/pre>\n\n\n\n
Step 2: Inject Config into a Service<\/h3>\n\n\n\n
Now, a service can inject this configuration in a type-safe way:<\/strong><\/p>\n\n\n\n
\/\/ data.service.ts\nimport { Injectable, inject } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { API_CONFIG, ApiConfig } from '.\/api-config.token';\n \n@Injectable({ providedIn: 'root' })\nexport class DataService {\n  private http = inject(HttpClient);\n  private config = inject(API_CONFIG);\n \n  getData() {\n\treturn this.http.get(`${this.config.baseUrl}\/items`, {\n  \theaders: { 'X-API-KEY': this.config.apiKey }\n\t});\n  }\n}<\/code><\/pre>\n\n\n\n
This approach is superior to string providers because it’s not prone to typos and is fully supported by TypeScript’s type checking.<\/p>\n\n\n\n
Why This Approach Is Better<\/h2>\n\n\n\n