Summary

The Angular Dependency Injection (DI) system allows developers to use the Injector service to streamline the injection of multiple services into components, improving maintainability and inheritance handling in large enterprise applications.

Abstract

Angular's Dependency Injection (DI) framework simplifies the instantiation and management of service dependencies within components. Traditionally, services are injected directly into component constructors, which can lead to cluttered and hard-to-manage constructors, especially in large-scale applications where a component may depend on numerous services. To address this, Angular provides the Injector service, which allows for a more elegant solution by injecting only the Injector into the component's constructor and then retrieving specific service instances on demand using this.injector.get(ServiceName). This approach not only reduces constructor complexity but also facilitates component inheritance, as child components can simply inherit the Injector without needing to replicate the entire list of dependencies. The article illustrates these concepts with code examples and provides a GitHub repository for further exploration, while also recommending an AI service for developers seeking cost-effective alternatives to ChatGPT Plus.

Opinions

The author suggests that using the Injector service is a "better approach" for injecting multiple services into a component, implying that it is more efficient and manageable than the traditional method.
The article implies that the conventional method of service injection can lead to "challenges" in enterprise Angular applications, particularly with components that have a large number of service dependencies.
The author expresses that the Injector service improves the extendibility of Angular components, making them "sleek and easy to extend."
By providing a link to a GitHub repository with source code, the author encourages readers to engage with the material and potentially contribute to or learn from the provided examples.
The recommendation of an AI service at the end of the article suggests that the author values practical and cost-effective tools that enhance developer productivity.

Angular Dependency Injection — Using “Injector” Service instead of long list of services in Component’s constructor

The Angular framework provides Dependency Injection (DI) out of the box. The easiest way to understand DI is to “Delegate creation of instance task to a global authority and just ask for the instance when you want to use it”.

Let’s make it simple, when we create a new service say OrdersServiceand provide it in a Root module, the @Injector({ providedIn:'root'}) decorator let Angular compiler know to register this class in a DI registry. It takes care of creating a new service instance internally so that its consumer doesn’t need to write code like let service = new OrdersService(). When a component needs OrdersService, it can ask for its instance by putting it in a constructor constructor(private ordersService: OrdersService){}. The Angular DI will check if it has OrdersService provided in its registry with all dependencies. If it is a first request for a service instance, then DI will create a new instance and pass it on, otherwise it will just pass on the existing service instance.

Challenges with Service Injection

So far, so good. The challenge would arise when you are working on an enterprise Angular application with tons of services and components. It won’t be unusual to see 10–15 services being injected into the component’s constructor.

For example, below component is injecting six services.

Another challenge would be with inheritance. If you need to derive a child component from ProductDetailsComponent then you need to provide all these services explicitly as shown below.

The derived component needs to inject these services first and then pass it to its base class using super() method call.

Dependency Injection using Injector Service

A better approach to inject multiple services into constructor is via Angular’s built it Injector service.

If you notice, in this case, we are injecting only one service Injector into the component’s constructor. When we need any particular service instance, we can query it from DI using this.injector.get(PaymentService) syntax.

The obvious benefit of this approach is with inheritance.

The derived class only needs to inject Injector a service and pass it on to super() the base class. This allows us make Angular component sleek and easy to extend.

You can find source code in this GitHub repository. Give it a star if you like it.

Cheers!