Angular Dependency Injection: Individual instances of each service are provided for every module usage

Question

Angular Dependency Injection: Individual instances of each service are provided for every module usage

Within my application, there is a module called "FileUpload". The upload service included is "UploadService", which receives a service injection with the interface "RequestService."

I also have two other modules: FileManager1 and FileManager2. Each file manager offers its own implementation of a service with the interface "RequestService" and provides it under the token "REQUEST_SERVICE."

To demonstrate this scenario in a simplified manner, I have created a StackBlitz example:

In order to create a separate instance of the file-upload service for each module usage, I made the decision to move the service provider from the file-upload.module.ts to the component drop-zone.component.ts. This adjustment has proven successful as evidenced by the console.log.

Clicking on "Click me" currently yields the same output for FileManager1 and FileManager2 ("Url2"). However, the desired outcome is "Url1" for FileManager1 and "Url2" for FileManager2.

I am seeking a clean solution to meet this requirement without resorting to multiple tokens apart from "REQUEST_SERVICE."

Thank you for your assistance!

Output displayed after click events:

A new service has been created....
A new service has been created....
Angular is running in development mode. Call enableProdMode() to enable production mode.
Upload file to:
Url2
Upload file to:
Url2

Desired output should be:

A new service has been created....
A new service has been created....
Angular is running in development mode. Call enableProdMode() to enable production mode.
Upload file to:
Url1
Upload file to:
Url2

angular dependency-injection

Answer 1

Answer №1

In Angular, ModuleInjectors are only created for the RootModule(AppModule) and lazy-loaded modules. When directly importing modules, the providers are elevated to the first lazy-loaded module in the hierarchy or to the RootModule if there isn't one.

If you import both FileManager1Module and FileManager2Module directly into AppModule in that order, Angular will first elevate the provider for REQUEST_SERVICE from FileManager1Module to AppModule, and then overwrite it with the one from FileManager2Module. This explains why "Url2" is printed to the console.

To resolve this issue, you have two options:

Declare REQUEST_SERVICE as a component level provider (within FileManager1Component and FileManager2Component)
Or if you intend to use the Router, consider lazy-loading the modules.

Cheers!

Answer 2

In Angular, ModuleInjectors are only created for the RootModule(AppModule) and lazy-loaded modules. When directly importing modules, the providers are elevated to the first lazy-loaded module in the hierarchy or to the RootModule if there isn't one.

If you import both FileManager1Module and FileManager2Module directly into AppModule in that order, Angular will first elevate the provider for REQUEST_SERVICE from FileManager1Module to AppModule, and then overwrite it with the one from FileManager2Module. This explains why "Url2" is printed to the console.

To resolve this issue, you have two options:

Declare REQUEST_SERVICE as a component level provider (within FileManager1Component and FileManager2Component)
Or if you intend to use the Router, consider lazy-loading the modules.

Cheers!

Answer 3

Answer №2

One potential solution is to define a distinct RequestService for each module provider in the following manner:

@Injectable({
  providedIn: CustomModule1 ,
})
export class CustomRequestService1 implements RequestService{
}

@Injectable({
  providedIn: CustomModule2 ,
})
export class CustomRequestService2 implements RequestService{
}

Then, you can easily inject these services by using the RequestService interface within any component or service of those respective modules.

Answer 4

One potential solution is to define a distinct RequestService for each module provider in the following manner:

@Injectable({
  providedIn: CustomModule1 ,
})
export class CustomRequestService1 implements RequestService{
}

@Injectable({
  providedIn: CustomModule2 ,
})
export class CustomRequestService2 implements RequestService{
}

Then, you can easily inject these services by using the RequestService interface within any component or service of those respective modules.

Angular Dependency Injection: Individual instances of each service are provided for every module usage

Answer №1

Answer №2

Similar questions

Encountering npm3 installation errors with typyings in Angular 2?

End-to-End Testing in Angular 2

Exploring Angular's ability to utilize the Map and Subscribe functions within an

Using Angular to call a separate function from within a click event handler within the same function itself

Is there a method to enable the acceptance of both dots and commas as decimal markers in input fields?

Guide on displaying tooltip messages for a custom directive in Visual Studio Code

Steps for Signing Up for a Collaboration Service

Component presenting surprising results

"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

generate a fresh array with matching keys

Exploring the dynamics of parent and child components in Angular

What is the reason behind the NgForOf directive in Angular not supporting union types?

Retrieving array-like form data in a TypeScript file

Setting up Firestore with @angular/fire 17 and Ionic @ionic/angular 7.6.2 for full offline functionality: a step-by-step guide

Effective strategies for extracting value from asynchronous Angular events that return Promises

Using Arrow Functions in Angular 2 Typescript with Support for IE11

Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

What materials are required in order to receive messages and information through my Contact page?

A method for comparing two arrays containing identical objects and then storing the results in a variable

What could be the reason for the absence of the Froala editor display