Using provideIn root , any & platform in Angular

Welcome to the tutorial on using the provideIn root, any, and platform options in Angular!

In this tutorial, we will recall quickly the different ways to provide dependencies in Angular, and we will learn how to use the provideIn root, any, and platform options.

We will also discuss when and how to use these options in different scenarios.

Reminder about dependency injection in Angular

Dependency injection is a design pattern that allows a class to receive its dependencies from external sources rather than creating them itself. In Angular, dependency injection is used to provide the required dependencies for a class when it is created.

There are several ways to provide dependencies in Angular:

Using the @Injectable decorator: This is the most common way to provide dependencies in Angular. When you use the @Injectable decorator to decorate a class, Angular creates a new instance of the class when it is needed and injects it into the component or service that requires it.
Using the @NgModule decorator: You can use the providers property of the @NgModule decorator to provide dependencies at the module level. This means that the dependency will be available for injection in all components and services within the module.
Using the @Component decorator: You can use the providers property of the @Component decorator to provide dependencies at the component level. This means that the dependency will be available for injection only in the component and its child components.

What is provideIn option in Angular ?

In Angular, the provideIn option is a way to specify where a service should be registered for injection.

It is used in conjunction with the @Injectable decorator to define a service and specify how it should be provided to the rest of the application.

The provideIn option can take one of three values: 'root', 'platform', or any.

Overall, the provideIn option is a powerful way to specify where a dependency should be provided and can be used to manage dependencies more effectively in large Angular applications.

Using provideIn root option

The provideIn: 'root' option can be used to specify that a dependency should be provided at the root level in an Angular application.

There are several scenarios where the provideIn: 'root' option can be useful:

When you wish to register a singleton service at the application level. This allows the service to be injected and utilized throughout the entire application, rather than being limited to a specific module or component.
If you have multiple Angular applications running on the same page and want to make sure that each application has its own independent instance of a service.

ProvideIn “root” Syntax:

Here is the syntax of how to use the provideIn: 'root' option to provide a dependency in an Angular application:

				
					import {Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})

export class Dependency {
  constructor(public value: string) {}
}

Using provideIn "any" option

The provideIn: 'any' option when you want each lazy-loaded module to receive its own instance of the service.

This can be useful if you need to ensure that each lazy module has its own isolated instance of the service, rather than sharing a single instance across the entire application.

ProvideIn “any” Syntax:

Here is the syntax of how to use the provideIn: 'any' option to provide a dependency in an Angular application:

				
					import {Injectable } from '@angular/core';

@Injectable({
  providedIn: 'any',
})

export class Dependency {
  constructor(public value: string) {}
}

Using provideIn "platform" option

The provideIn: 'platform' option is used to indicate that the dependency should be provided in the platform injector in the Angular application.

By default, the platform injector is shared by all applications on the page.

This means, if you have multiple Angular applications running on the same page, they will all share the same platform injector and any services that are registered with it.

ProvideIn “platform” Syntax:

Here is the syntax of how to use the provideIn: 'platform' option to provide a dependency in an Angular application:

				
					import {Injectable } from '@angular/core';

@Injectable({
  providedIn: 'platform',
})

export class Dependency {
  constructor(public value: string) {}
}

The default provideIn option

The default value for the providedIn option in the @Injectable decorator is 'root', which means that a dependency will be provided at the root level by default.

Here is an example of how to use the default providedIn: 'root' option to provide a dependency at the root level:

				
					import { Injectable } from '@angular/core';

@Injectable()
export class Dependency {
  // ...
}

In this example, we have not specified a value for the providedIn option, so it will use the default value of 'root'.

This means that the Dependency class will be provided at the root level and will be available for injection in any part of the application.

To inject the Dependency class in a component or service, you can use the @Inject decorator like this:

				
					import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(Dependency) public dependency: Dependency) {}
}

In this example, we have injected the Dependency class using the @Inject decorator.

The Dependency class will be provided at the root level, and the component will be able to use it.

Overall, the default value for the providedIn option is 'root', which means that a dependency will be provided at the root level by default.

This can be useful in many scenarios, but you can also use the providedIn option to specify a different location for the dependency if needed

Using provideIn options effectively in Angular

Here are a few tips for effectively using the provideIn options in your Angular applications:

Use the provideIn: 'root' option unless you have a specific reason to use the provideIn: 'platform' or provideIn: any options. This will allow you to keep your service registrations centralized in the root injector, which can make it easier to manage your services and avoid potential injection errors.
Use the provideIn: 'platform' option sparingly and only when you need to create a service that is only available for injection in the root component and its children.
Use the provideIn: any option sparingly and only when you need to ensure that each lazy-loaded module has its own isolated instance of a service.
Avoid using the provideIn: 'platform' and provideIn: any options for services that will be used and shared beyond the entire application. This can cause confusion and make managing your service dependencies much more difficult.

By following these tips, you can effectively use the provideIn options to manage the scope and availability of your services in your Angular applications.

References

Here are more related references and links that discuss the same subject:

Angular Tutorials Front-End web development

Using provideIn root , any & platform in Angular

Table of Contents