Dependency injection with Angular 9
Angular 9 brought us some new options for dependency injection. In this article, we are going to take a look at these different options.
Let’s start with the most common use case, which is using the root injector.
Injectable provided in ‘root’
root is the option that was added a while back in Angular 6. Angular CLI uses that option as its default when you create a new service with the command: ng generate service.
Here is what the syntax looks like:
import { Injectable } from '@angular/core';@Injectable({
providedIn: 'root'
})
export class MyService {
}
When you use that syntax, your service is provided at the root injector level. This means that your service is going to be a global singleton that can be injected anywhere in your application.
Using that syntax is similar to adding your service to the array of providers of your main AppModule, with one key difference: The providedIn: ‘root’ syntax makes your service tree-shakeable.
What does tree-shakeable mean?
It means that if a service ends up not being used by your application, the Angular compiler is going to remove that service from your production build, which results in a smaller, faster application.
It’s unlikely that you would write a service and not use it. This feature is more useful for your dependencies: You could be using a component library (say Angular Material) and only use 10% of the services available in that library.
If the services of that library are provided with tree-shakability in mind, then your Angular build is going to be able to exclude the 90% of services that your application doesn’t need.
Injectable provided in ‘platform’
platform is one of the two new options given in Angular 9+.
The syntax is very straightforward:
@Injectable({
providedIn: 'platform'
})
export class ProvidedInPlatformService {
}This type of dependency injection is especially interesting if you’re running multiple Angular applications on one web page. That’s because when using platform, your service is now a global singleton at the platform-level, and is shared between all of the Angular applications on your page.
In other words, a service provided in the platform can allow you to share information between multiple Angular applications running in the same browser tab.
Why would we need that option?
While this might look like an uncommon scenario, remember that Angular Elements are self-contained components that behave like mini-Angular applications.
If you’re using Angular Elements, the platform option allows you to share a service between your different Angular elements, which was not possible before.
Injectable provided in ‘any’
any is the final option added to Angular 9. With any, Angular will provide a unique instance of your service in every module that injects it.
@Injectable({
providedIn: 'any'
})
export class ProvidedInAnyService {
}In other words, if you have three different modules in your application, and 2 of them use the above service, you would end up with two different instances of the service, one in each module that injects it.
You can give a try to those different options using the following Stackblitz demo ( https://stackblitz.com/github/alcfeoh/ng9-di-demo):
My name is Alain Chautard. I am a Google Developer Expert in Angular, as well as founding consultant and trainer at Angular Training where I help development teams learn and become proficient with Angular.
Need help with Angular? Let’s schedule some time to talk.
If you enjoyed this post, please clap for it or share it. Your help is always appreciated.
