Angular Advanced Dependency Injection: Injection Tokens, Multi Providers, and Tree-Shakable Providers

,

—

5–8 minutes

Introduction

The Angular Dependency Injection (DI) system helps to create modular, testable, and maintainable applications. It also has some advanced features such as Injection Tokens, MultiProviders, and Tree Shakable Providers for performance and flexibility. This blog explains these concepts to help developers improve the Angular Dependency Injection for large-scale applications. Most developers are familiar with the basic dependency injection concept, but injection tokens, multi-providers, and tree-shakable providers give more flexibility and more efficient ways. However, this blog will give insights into leveraging the Angular Dependency Injection system for large-scale applications.

Understanding Angular Dependency Injection

Dependency Injection (DI) is a design pattern whereby dependencies are provided to a class rather than the class instantiating them. These dependencies are provided by providers, registered in NgModules, components and directives, and promote loose coupling and modularity. Dependency resolution is the main use of Angular’s constructor injection. 

Diagram illustrating Angular’s Dependency Injection process and configuration using a factory method.

Dependency management is further advanced through Injection Tokens, MultiProviders, and Tree Shakable Providers (Cifuentes et al., 2023). These features maximise performance, ease service registration, and facilitate developers to construct highly scalable and sustainable applications.

Injection Tokens in Angular

Injection Tokens are a flexible alternative to injecting dependencies that aren’t tied to class types (primitive values, configuration, etc.). Typically, Angular’s Dependency Injection system relies on type-based injections, where dependency keys are acted as classes. Nevertheless, injection tokens act as unique identifiers within the DI system, which are used to find and deliver values for non-class-based dependencies (Kaur and Tiwari, 2023).

Code snippet demonstrating the creation of an InjectionToken for the global window object in Angular.

First, there is an InjectionToken class, which is used to create an InjectionToken. Custom tokens can be defined by developers to be used to, for example, host configuration settings or instead of interface-based dependencies. Next, it is registered in the module provider array coupled with an associated value using the useValue property.

Code snippet demonstrating an Angular component setup, including the use of a custom service in the providers array.

The next component or service is then able to inject the token via Angular’s @Inject() decorator, and this ‘injects’ (links) the token to its value runtime (Kodali, 2022). Modularisation and ease of handling global constants are niche applications where you can inject tokens. This feature enhances the ability to change and maintain the Angular applications easily.

MultiProviders in Angular

Angular uses MultiProviders for the Dependency Injection system to return an array of all the providers associated with the given token. It allows registering a set of services or values under the same token. Specifically, this is useful when there are multiple instances of a service that need to be injected into a single dependency, which makes things more flexible and modular (Manda, 2024).

Angular APP_INITIALIZER with Practical Example | by Piyali Das | Medium
Diagram illustrating Angular Provider configuration, showing how to provide services and use DI tokens.

By default, each token gets a single instance of a service that is provided by Angular’s Dependency Injection system. This limitation is overcome by having MultiProviders use an array of [providers] (Sakon et. al., 2024). To achieve this, a multi-property is set to true on the provider registration so that Angular merges multiple services into a single array instead of overwriting existing providers.

Code snippet demonstrating an Angular component for employee details, highlighting its dependency injection setup.

MultiProviders are commonly used for logging systems, middleware pipelines, event handling systems, and any other components. For instance, there can be a logging system that will let the client dynamically register various logging strategies (console logging, file logging, remote logging to a server, etc.) under one common token. Building upon the above approach, applications can be scaled by dynamically adding or removing services without bothering with the core functionality (Cifuentes et al., 2023).

Moreover, MultiProviders make it easier to implement middleware patterns involving various middleware functions injected into a processing pipeline. This pattern improves code modularity by moving the middleware logic independent of the main application flow.

Tree Shakable Providers

Angular’s Tree Shakable Providers are an optimisation feature that allows the unused services to be removed automatically from the final application bundle that is being built. Reduce the bundle size behaviour of the application and ensure the inclusion of only the necessary code (Kaur and Tiwari, 2023). This technique is essential in enhancing application performance. It agrees with the Angular modular design philosophy to develop more efficient and lightweight applications.

Illustration of Angular’s tree shaking process, showcasing how unused services are optimized during dependency injection.

To optimise Angular’s dependency injection system by only bringing in the services that are used and minimising what is known as bloated dependency injection, Angular introduced tree-shakable providers. When the services are registered with the providedIn property, Angular determines the services usage in the application. If it does not get referenced in any of your components or your module, the service is going to be excluded from your final production bundle, which means you have less overhead.

Tree Shakable Providers support different scoping options, such as root or module-specific scopes. If it’s specified as provided in ‘root, ‘ Angular makes the service available application-wide, and the tree shakes unused services themselves. Alternatively, services can be scoped to feature modules, ensuring they are only bundled when the respective module is loaded. This approach promotes lazy loading and further reduces the initial application size (Kodali, 2022).

Example of an Angular service implementation with the @Injectable decorator, showcasing Dependency Injection and the use of the providedIn property for tree shakable providers.

Property in Angular

The primary benefit of Tree Shakable Providers is the automatic elimination of unused code, which enhances application performance and reduces memory consumption. It also simplifies service registration by removing the need to manually declare services in the module’s providers array, resulting in cleaner and more maintainable codebases (Manda, 2024).

Moreover, Tree Shakable Providers encourage best practices by fostering modular application architecture. Developers can confidently create services without worrying about performance implications, knowing that Angular will optimise the final bundle (Sakon et al., 2024).

Conclusion

Angular Dependency Injection enhances application scalability and modularity. Injection Tokens manage non-class dependencies, while MultiProviders register multiple services under one token. Tree Shakable Providers optimise performance by excluding unused services. Mastering these features helps developers build efficient, flexible, and high-performing Angular applications.

References

angular.love, 2025. Tree Shakable Providers [Online]. Available at: https://angular.love/what-you-always-wanted-to-know-about-angular-dependency-injection-tree [Accessed on: 3.3.2025].

angularjs.org, 2025. Angular Dependency Injection [Online]. Available at: https://docs.angularjs.org/guide/di [Accessed on: 3.3.2025].

blog.eduonix.com, 2025. MultiProviders in Angular [Online]. Available at: https://blog.eduonix.com/2017/04/learn-multi-providers-feature-angular2/ [Accessed on: 3.3.2025].

Cifuentes, C., Gauthier, F., Hassanshahi, B., Krishnan, P. and McCall, D., 2023. The role of program analysis in security vulnerability detection: Then and now. Computers & security, 135, p.103463.

debugmode.net, 2025. How to use useclass with tree shakable services in angular [Online]. Available at: https://debugmode.net/2020/06/23/ how-to-use-useclass-with-tree-shakable-services-in-angular / [Accessed on: 2.3.2025]

debugmode.net, 2025. How to use useclass with tree shakable services in angular [Online]. Available at: https://debugmode.net/2020/06/23/ how-to-use-useclass-with-tree-shakable-services-in-angular / [Accessed on: 2.3.2025]

Kaur, G. and Tiwari, R.G., 2023, July. Comparison and analysis of popular frontend frameworks and libraries: An evaluation of parameters for frontend web development. In 2023 4th International Conference on Electronics and Sustainable Communication Systems (ICESC) (pp. 1067-1073). IEEE.

kevinkreuzer.medium.com, 2025. Angular inject [Online]. Available at: https://kevinkreuzer.medium.com/angular-inject -33c6ce8cfd07 [Accessed on: 2.3.2025]

Kodali, N., 2022. Angular’s Standalone Components: A Shift Towards Modular Design. Turkish Journal of Computer and Mathematics Education (TURCOMAT) ISSN, 3048, p.4855.

Manda, A., 2024. ENHANCING USER INTERFACES WITH ANGULAR AND TYPESCRIPT IN LARGE-SCALE APPLICATIONS. INTERNATIONAL JOURNAL OF COMPUTER ENGINEERING AND TECHNOLOGY (IJCET), 15(5), pp.921-927.

medium.com, 2025. MultiProviders in Angular [Online]. Available at: https://medium.com/@piyalidas.it/angular-app-initializer-with-practical-example-57c434d5a8c2 [Accessed on: 3.3.2025].

medium.com, 2025. Tree Shakable Providers [Online]. Available at: https://medium.com/@gaikwadashish0120/what-are-services-and-tree-shakable-providers-in-angular-services-d9cc97d9c407 [Accessed on: 3.3.2025].

Sakon, S., Tsukada, L., Fong, H., Kennington, J., Niu, W., Hanna, C., Adhicary, S., Baral, P., Baylor, A., Cannon, K. and Caudill, S., 2024. Template bank for compact binary mergers in the fourth observing run of Advanced LIGO, Advanced Virgo, and KAGRA. Physical Review D, 109(4), p.044066.

walkingtree.tech, 2025. Angular Dependency Injection [Online]. Available at: https://walkingtree.tech/implementing-dependency-injection-angular/ [Accessed on: 3.3.2025].

walkingtree.tech, 2025. Angular Dependency Injection [Online]. Available at: https://walkingtree.tech/implementing-dependency-injection-angular/ [Accessed on: 3.3.2025].

Leave a comment