Are the Angular services singleton?

Introduction

The answer would be no. The main objective of angular services is to share data across Angular application. Practically an angular service can be shared between all the components or can be limited to some component. Hence Angular service can be a singleton as well as non-singleton in nature.

Let me show you how we can use the angular service in a singleton and a non-singleton.

How to use service as a Singleton?

“A service for which only one instance exists in the application is called to be a singleton in nature.”

A service becomes singleton when we apply providedIn property of @Injectable decorator or Declare service in the providers’ array of @ngModule.

Lets Explore with below example

Here is an example for both the way of the declaration mentioned above respectively.

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

@Injectable({
    providedIn: 'root'
})

export class SomeService {
}

We can assign value ‘root’ to the providedIn property of @Injectable if we want to provide service at the root level i.e. load the singleton service along with the root Module in Angular App. Using providedIn property, the service itself decides where it should be provided.

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule],
    providers: [SomeService],
    bootstrap: [AppComponent]
})

export class AppModule { }

We are a team of expert developers, testers and business consultants who strive to deliver nothing but the best. Planning to build a completely secure and efficient Angular app? 'Hire Angular Developers'.

“Provider, are something which can create or deliver a service to the component.” When you are providing service in the root module it makes service global and that service is used by all the components.

When a component wants to use a service, it starts searching for dependency on the current injector provider. If it is not found then it will raise the level of search and will search in the root module and return the instance to component.

When a service is provided in appModule and in some other modules with the same definition, for other modules we use already created instance which is generated by root injector.

Lazy loaded module has their own Dependency Injector so they create their own copy of service. Like, parent injector and it’s child injector. Loading a single module in multiple feature modules would create multiple instances and service will no longer behave as a singleton. To prevent the creation of additional instance by lazy loaded modules we can import forRoot() method in appModule.

//app.module.ts
//import SharedModule in AppModule

@NgModule({
    imports: [
        SharedModule.forRoot() //will provide service as singleton service
    ]
})

export class AppModule { }

// sharedModule.module.ts
// make shared module

@NgModule()
export class SharedModule { 
    static forRoot(): ModuleWithProviders {
        return {
        ngModule: SharedModule,
        providers: [ SomeService ]
        };
    }
}

By adding service in the component’s providers array, we make the nature of service non-singleton. Now it is a service that can be used between parent and child components.

@Component({
    selector: 'other-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [SomeService]
})

export class OtherComponent {}

In this case, service is a non-singleton nature. It will create multiple instances of a service. Every time a new instance of provided service will be created when a component is used inside another component. Service is being destroyed along with the component.

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.