Angular 2+ Service Providers and Limiting its Scopes

In this Angular tutorial, we’ll learn about Providers. How we can limit the scope of Service Providers in Angular application which plays a crucial role in optimizing a large application.

 

[lwptoc]

What is a Provider?

A provider in Angular acts like an instruction for the Dependency Injection system, which directs on how to get a value for a particular dependency.

These Dependencies are the services that we create and provide to Angular application module(s).

Scope of Services

Generally, when we create a new Service using the generate command $ ng g service Student, it creates a class with @Injectable() decorator. Which by default have the providedIn set to ‘root’, making it available at the root injector. Mean now we can use this provided StudentService in any Component/ Module

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

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  constructor() { }
}

 

Limiting Scope of Services

We can also specify the Module name in the providedIn, so that the StudentService will be provided to that module and NOT available throughout the application.

import { Injectable } from '@angular/core';
import { StudentModule } from './student.module';

@Injectable({
  providedIn: StudentModule
})
export class StudentService {
  constructor() { }
}

In real scenarios, you may need to provide the same service to multiple modules that will not be possible with the above method.

In that case, you can specify the Service under the providers array in Modules themselves. Under @NgModules() decorator providers can take a list of provided services.

So if you have multiple Modules which need the same service, then just add those services to the providers array.

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

import { StudentService } from './student.service';

@NgModule({
  providers: [StudentService],
})
export class StudentModule {
}

 

Limit Service Scope to Component

Like we can limit the provider scope to a specific Module, we can do same with Components as well. We can limit the provider scope to a single Component also by specifying Service to the providers array of  @Component() decorator.

@Component({
  ...
  providers: [StudentService]
})

Providing the service in a component will only provide the instance to that component and its child Components, making it unavailable to even other Components in the same Module.

 

Conclusion

We discussed on How we can limit the Scope of Service providers up to different levels in Angular application. Services are created to the ‘root’  scope by default which makes them available throughout the application.

By specifying the Services inside the providers array available inside the @NgModule and @Component decorator helps in optimizing the large application by tree-shaking the access load.

You can read more about how Injectors create a child instance with each specification of a provider at the child Module level on official docs here.