Angular Singleton Service

A singleton service is a service for which only one instance exists in an app. In this tutorial, we will show how to create a singleton service in Angular when the service is in the root module, eagerly loaded module, or lazy loaded module.

How to Create a Singleton Service in Angular

There are two ways in which you can create a Singleton Service

Using the root option of the providedIn property. This works irrespective of your service is in an eager module or lazy loaded module. Using the providedIn  is the preferred way as it makes the service tree shakeable.

The second option is to add it in the Providers array of @NgModule.

If the NgModule is root module or eagerly loaded module, then the AppService is available as a Singleton service to the entire application

But if the NgModule is lazy-loaded module, then AppService is available only in that Lazy loaded module and not outside of it.

Angular Singleton Service Example

Let us try to create the Singleton Service using an example from StackBlitz

The app has three modules. AppModule, EagerModule & LazyModule.

All the modules contain a random generation service. AppService, LazyService, & EagerService. The code for the AppService is as shown below. The LazyService & EagerService also has the same code. We just prefixed the random number with the service name to distinguish it from other services.

app.service.ts

We have four components. AppComponent & HelloComponent from the Root Module, EagerComponent from EagerModule and LazyComponent from LazyModule

The following code is from the HelloComponent.

hello.component.ts

We have injected all three services into HelloComponent. The Optional Decorator ensures that if the service not available then the Angular returns null instead of throwing an error.

All the other components also have similar codes. The AppComponent has a navigation menu.

Initially, we start off by removing the providedIn and also making the provider’s array empty. This will make all the component’s display Not defined. No errors thrown as we are using the optional decorator

Service in the root module

The AppService is in the root module.

Add it to the Providers array of the @NgModul of the AppModule.

You can see that all components display the same value for the Random No (including those from EagerModule & LazyModule ). You can also see the AppService Constructed in the console only once.

Another way to achieve this is to add the providedIn: 'root' in the @Injectable decorator in the AppService

Service in the eagerly loaded module

The services in the eagerly loaded module can be made singleton in the same way as in the root module.

You can add it in the providedIn :'root' with the @Injectable decorator

Or add it to the providers array of the NgModule decorator of the EagerModule.

Service in the lazy loaded module

Adding the LazyService in the providers array of the LazyModule. But this makes the LazyService available only in the LazyModule and not outside of it.

The only way to achieve it by using the providedIn : 'root' in the Injectable of the LazyService

That’s it.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top