Angular Deep dive into ProvidedIn scopes
In this tutorial we will learn about using ProvidedIn.
Before Angular version 6 we used to add our services in Providers array of NgNodule.
When Angular released version 6, it introduced ProvidedIn: ‘root’.
Advantages:
- Services are tree-shakable
- Services are singleton for the whole application, also for lazy loaded modules
- No need to explicitly register the service with a NgModule
What is TreeShaking
As per MDN docs
Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code.
It relies on the import and export statements in ES2015 to detect if code modules are exported and imported for use between JavaScript files.
In modern JavaScript applications, we use module bundlers (e.g., webpack or Rollup) to automatically remove dead code when bundling multiple JavaScript files into single files. This is important for preparing code that is production ready, for example with clean structures and minimal file size.
Angular 6 introduced ProvidedIn which we can use in @Injectable Decorator.
Angular 9 introduces 2 new ways of defining scope of ProvidedIn which are any , platform .
In this tutorial we will be discussing about all possible value of ProvidedIn which are “root”, “any”, “platform”, “<FeatureModule>”.
ProvidedIn root
When you use ProvidedIn: 'root’option, Angular registers application-level singleton service.
@Injectable({
providedIn: 'root'
})export class SomeService{}
The root option registers the service in the Root Module Injector of the Module Injector tree. This makes it available to the entire application irrespective of whether the service is lazy loaded or eagerly loaded.
If it is never used it will not be added in the final build (tree shaking).
ProvidedIn any
Use ProvidedIn: any when you want every lazy-loaded module to get its own instance of the service.
@Injectable({
providedIn: 'any'
})export class SomeService{}
The eagerly loaded modules always share the instance provided by the Root Module Injector. Hence this will not have any effect on them.
ProvidedIn platform
As per the documents
A special singleton platform injector shared by all applications on the page.
the platform allows us to add the service to the Providers of the Platform Injector. If you recall, the Platform Injector is the parent of the Root Module Injector in the Module Injector tree
@Injectable({
providedIn: 'platform'
})export class SomeService{}
This is useful if you have multiple Angular Apps running on a single page.
This is a useful option if you are using Angular Elements, where they can share a single instance of service between them.
ProvidedIn <FeatureModule>
providedIn: FeatureModulebeing would guarantee that the service can only be used when FeatureModulebeing imported, same as configuring provider in its metadata.
@Injectable({
providedIn: 'FeatureModule'
})export class SomeService{}
If you liked this please give a clap.
Read Next
References:
https://www.tektutorialshub.com/angular/providedin-root-any-platform-in-angular/