Benefits of Three Levels of Injectors

Isolation of concerns

Well, having the ability to set that a class can be injected at different levels allows us to create certain levels of isolation. We can, as we briefly discussed in the @Component Injector section, set it so that a service can only be injected at a component level or is only available at a certain module level.

This means we can create specialized services that perform one task, and are only needed in one place, if our Angular application needs to provide some business logic that is critical to the application but is very specialized.

Example

For example, if our application had to do with finance, we may have a service for working out client financial statements. This is a specialized service that is only needed in one part of the application. Therefore we need to limit the exposure of service to other parts of the application so that it’s clear that this service only does one job in the one place of our application. This isolation of concerns is a good practice to use in applications.

Tree shaking

One of the main benefits of using Injectors is the ability for the Angular compiler to use tree shaking when running the application. The idea behind tree shaking is that when an application is running, any services that aren’t used at the time can be removed from the final bundle of the application. The Angular compiler shakes the application to remove all the dead leaves (or services in Angular’s case). That’s why this feature is called tree shaking.

This has the benefit of creating a download that is as small as possible when the user runs the appication. The less the user has to download before the application starts, the faster the application will startup.

Using providedIn property for services

What helps Angular know about these services is the providedIn property we set in the @Injector operator of our ClientService.

@Injectable({
  providedIn: 'root'
})

In previous versions of Angular, where tree shaking was not a feature, there was a one-way connection between the services being injected and the providers. The provider contained a list of the services within the module, and the service did not know what module it belonged to.

Now, with the providedIn property, the service also knows what module it belongs to. So, the module no longer needs to know of all the dependencies, and therefore when the application is running, the unused dependencies (services and so on) can be removed. This new way of setting dependencies makes tree shaking possible in the latest version of Angular.

We will be covering bundling and deploying an application later in the Packaging our application chapter.