What is the reason for injecting a service into 2 modules following the Singleton Pattern?

Here is the current file situation:

AppService
AppModule
    AModule
        AComponent
    BModule
        BComponent

Regarding the Service, I have noticed that Angular will create two separate instances of the service if it is injected into two components, meaning the data is not shared. However, when the Service is injected in the AppModule as a Singleton Pattern, the data is shared among all components.

What happens when the Service is injected in both AModule and BModule? I initially assumed that the result would be the same as injecting in a component, but it turns out to follow the Singleton Pattern.

Why is this the case? Even though the Service was injected into two different modules, Angular seems to generate a single instance of the service. Can someone help me understand why? Thank you.

You can view the StackBlitz demo at angular-service-inject-modules

I have created a demo that outputs random numbers to demonstrate the behavior of the Singleton Pattern with the service.

angulartypescriptdependency-injectionserviceangular-module

Answer №1

After providing a service in a module and re-importing it, the service becomes available throughout the entire app. To test this, you can try commenting out the providers = [AppService] from moduleB and observe the same outcome as before.

If you provide the service within each individual component, you will notice that a new instance of the service is injected, as demonstrated in this working stackblitz example.

Based on feedback from comments, if you prefer not to have a singleton service injected in your app, you can exclude Dependency Injection (DI) entirely and create a new instance of the service in each component.

constructor() { this.random = new AppService().random; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display custom component on app.component.html

After creating a unique custom component named core.component, I proceeded to import it into a module with the same name. core.component.html <div class="container-fluid text-left"> <div class="row rows-cols-2 top-bar"> ...

angular

using multiple directives in combination with export as

<form novalidate class="mt-2" #paramForm="ngForm" [formGroup]="form" (ngSubmit)="onSubmit(form)"> I recently received a helpful tip from Webstorm: https://i.stack.imgur.com/eb5N8.png Does anyone know of a method to access the ngForm instance expor ...

angularangular-reactive-forms

unable to access environment file

Recently, I delved into the world of TypeScript and created a simple mailer application. However, I encountered an issue where TypeScript was unable to read a file. Placing it in the src folder did not result in it being copied to dist during build. When I ...

node.jstypescriptenvironment-variables

Lazy-loading modules in SSR Angular 8 applications are currently unspecified

I am currently in the process of setting up my Angular 8 application to work with server-side rendering (SSR). However, I am encountering some undefined errors in webpack when running my application using ng serve, especially with lazy-loaded modules. Ever ...

angulartypescriptwebpacklazy-loadingserver-side-rendering

Exciting updates revealed upon new additions (angular)

I'm working with three components in my Angular application: app.component, post-create.component, and post-list.component. Let's take a look at the structure of these components: <app-header></app-header> <main> <app-post-c ...

angulartypescript

Navigating the syntax of React with Typescript - Feeling lost

As I embark on my journey with Typescript/React, I find myself trying to decode the meanings behind it all. Coming from a C# background, this new environment presents a unique challenge for me. Despite going through several tutorials, I still find myself p ...

reactjstypescript

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

I'm currently delving into an Angular book, but I'm struggling to locate any definitive documentation regarding the usage of square brackets in a lambda expression like [hours, rate]) => this.total = hours * rate. While I grasp that these para ...

javascripttypescriptlambdaecmascript-6

NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification. https://i.sstatic.net/VZxM6.png https://i.sstatic.net/ahLkn.png CSS .modal-content{ ...

cssangularbootstrap-4bootstrap-modal

Tips on navigating an array to conceal specific items

In my HTML form, there is a functionality where users can click on a plus sign to reveal a list of items, and clicking on a minus sign will hide those items. The code structure is as follows: <div repeat.for="categoryGrouping of categoryDepartm ...

javascripttypescript

What is the best way to download a file with a specific name using Angular and TypeScript?

Greetings! Below is a snippet of code from my Angular component: this.messageHistoryService.getMessageHistoriesCSV1(msgHistoryRequest).subscribe( (data) => { console.log(data.messageHistoryBytes); let file = new Blob( [data.messageHistoryBytes ...

javascriptangulartypescript

Express.js Router does not recognize the term 'this'

Greetings and thank you for taking the time to peruse through this. I am venturing into the realm of express.js and typescript and have stumbled upon an intriguing issue. I am currently trying to unravel the mystery behind why 'this' is undefined ...

typescriptexpress

Embracing Angular2 - incorporating external modules

Attempting to incorporate the phoenix_js NPM module into my Angular2 app (which was created using the Angular2 CLI) is proving to be a challenge. I keep encountering the error message Cannot find module 'phoenix_js'. Many others have also faced t ...

angular

Is it possible to load the surrounding markup in Angular before the guards are resolved upon the initial load of the router-outlet?

Within our Angular 12 application, we have implemented guards that conduct checks through API calls to the backend in order to validate the user's permissions for accessing the requested route. The default behavior of these guards follows an all-or-no ...

htmlangularangular-ui-routerrouterrouter-outlet

modify the navigation when router events are triggered

Is there a way to modify the destination route after the router events have been triggered in an Angular app? I am trying to implement a functionality where if the user clicks the browser back button, the navigation is redirected to the home page. However, ...

javascriptangular

Leverage jsencrypt in Ionic 3

Struggling to hash passwords for login on my Ionic 3 app, I attempted using jsencrypt following a tutorial but encountered issues as I couldn't grasp how it works... Here's what I tried : npm install --save jsencrypt import { Component } from ...

angularjstypescriptionic-frameworkionic3

Adding a baseURI to the image src in Angular 5 is causing issues with dynamically loading images

I am currently working on Angular 5.2.1 and I am facing an issue with loading an image from a server using its source URL. Here is the HTML code: <img #image [src]="cover" class="img-fluid" alt="NO image"> And here is the TypeScript code in image- ...

angulartypescriptimageangular5

Using Typescript: ForOf Iteration with Unknown Value Types

My journey began with a quick peek at this particular inquiry. However, the approach discussed there utilized custom typing. I am currently iterating over object entries using a for-of loop. Here's a snippet of the values I'm dealing with below. ...

typescript

Guidelines for returning an object upon finishing the .map function within a promise-based function in Node.js

While working on server-side code using nodejs, I have encountered an issue with the .map() method inside a Promise. The problem is that the method returns a value before the .map() function completes its execution successfully. Here's the snippet of ...

node.jstypescript

Error: Tried to modify a property that is read-only while using the useRef() hook in React Native with Typescript

I'm facing an issue while attempting to utilize a useRef hook for a scrollview and pan gesture handler to share a common ref. Upon initializing the useRef() hook and passing it to both components, I encounter an error that states: TypeError: Attempte ...

javascripttypescriptreact-nativereact-hooksuse-ref

The mat-datepicker is being displayed beneath the content

My Angular material design datepicker is displaying underneath the content. Within my module, I have a component that is rendered inside app-root. This component includes a mat-stepper with a mat-datepicker inside one of the steps. This is how the genera ...

angularmaterial-designangular-material2