DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
GaurangDhorda
GaurangDhorda

Posted on • Updated on

Understand providedIn options in angular services

Angular CLI by defaults creates services in root level of app.module. That is declared in services @Injectable( ) decorator. like... { providedIn:'root' }. As of now angular provides different options of angular services like [a] root [b] any [c] platform. Understand each option using small diagram, and understand what level service is declared and object is live within which level of application.

You can support me

Alt Text

1. { providedIn: 'root' }

Alt Text

As You can seen above our root module is "app.module.ts", and providedIn: 'root', creates only one singleton object for entire child module and root module too. we simply inject services inside component and same root-level object instance is shared between each component.

2. { providedIn: 'any' }

Alt Text

As you can seen in above image, if services are created using providedIn: 'any', Then, each and every module have their own object state and each time new instance of service is created. Each root module has their own instance, and for each lazy module has their own instance.

3. { providedIn: 'platform' }

Alt Text

As you can seen in above image, providedIn: 'platform' is new provided by angular, and its creates services instance only once, and then share state in each library and each level down to component tree.

[ NOTE: ] We can also declare services inside modules providers:[] arrays. If services defined in providers:[] array then, services are not tree-shakable, and if we declare services as per images shown above, using @Injectable(), decorator then this pattern is tree shakable. Tree-Shakable is when you never reference and used services in any of your component, then final production build will not include that services.

You can support me

Alt Text

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!