Using Angular DI to inject a specific token value into a provider factory

Question

Using Angular DI to inject a specific token value into a provider factory

Can an InjectionToken be injected into a factory provider?

This is what I have implemented:

export const HOST_TOKEN = new InjectionToken<string>("host");

let configDataServiceFactory = (userService: UserService, host: string) => {
    return new Config("host", 8080, userService.getUser(), userService.getPasswd());
};

export let configDataServiceProvider =
{
    provide: CONFIG_API,
    useFactory: configDataServiceFactory,
    deps: [UserService, HOST_TOKEN]
};

In my module:

@NgModule(
  providers: [
    {provide: HOST_TOKEN, useValue: "allianz-host"},
    configDataServiceProvider
  ]
)

However, Angular seems to be injecting the value "host" instead of "host-allianz" in configDataServiceProvider.

Any suggestions on how to fix this?

angular typescript dependency-injection

Answer 1

Answer №1

A method to achieve this is by using the @Inject decorator as shown below. This allows you to extract the necessary dependency from the DI container.

let configDataServiceFactory = (userService: UserService, @Inject(HOST_TOKEN) host: string) => {
    return new Config(host, 8080, userService.getUser(), userService.getPasswd());
};

Another option to consider is accessing all registered InjectionToken's from the application's Injector. This can be done by calling the get method on the injector instance and providing the name of the InjectorToken.

export const HOST_TOKEN = new InjectionToken<string>("host");

let configDataServiceFactory = (userService: UserService, injector: Injector) => {
    let host = injector.get(HOST_TOKEN); //retrieve token from injector
    return new Config(host, 8080, userService.getUser(), userService.getPasswd());
};

export let configDataServiceProvider =
{
    provide: CONFIG_API,
    useFactory: configDataServiceFactory,
    deps: [UserService, Injector]
};

Find more information here

Answer 2

A method to achieve this is by using the @Inject decorator as shown below. This allows you to extract the necessary dependency from the DI container.

let configDataServiceFactory = (userService: UserService, @Inject(HOST_TOKEN) host: string) => {
    return new Config(host, 8080, userService.getUser(), userService.getPasswd());
};

Another option to consider is accessing all registered InjectionToken's from the application's Injector. This can be done by calling the get method on the injector instance and providing the name of the InjectorToken.

export const HOST_TOKEN = new InjectionToken<string>("host");

let configDataServiceFactory = (userService: UserService, injector: Injector) => {
    let host = injector.get(HOST_TOKEN); //retrieve token from injector
    return new Config(host, 8080, userService.getUser(), userService.getPasswd());
};

export let configDataServiceProvider =
{
    provide: CONFIG_API,
    useFactory: configDataServiceFactory,
    deps: [UserService, Injector]
};

Find more information here

Using Angular DI to inject a specific token value into a provider factory

Answer №1

Similar questions

What is the process of determining if two tuples are equal in Typescript?

What purpose does the # symbol serve in Angular when interpolating values?

Does this Spread Operator Usage Check Out?

What is the best way to pass a conditional true or false value to React boolean props using TypeScript?

Unable to personalize map controls in OpenLayer mapping system

Determine the category of a nested key within a different type

Backend serving an Angular application with Spring Security configuration

Error: Interface declaration for _.split is missing in the Lodash.d.ts file

Encountering difficulties compiling Angular project

retrieve data from the server

Using an array to enforce form validation rules in Angular, including prohibited form values

Steps for including a component in a loop using Angular 6

Encountering an issue when using the Google authentication provider with Next.js version 13

Web performance issues noticed with Angular 8 and Webpack 3.7 rendering speed

Angular and the feature of contenteditable

Tips for effectively utilizing react-test-renderer/shallow in a TypeScript environment

Changing a table cell's value when a button is clicked using Angular

Patience is key: Techniques for waiting on service responses in Angular 2

Executing the serve command in an Angular project necessitates a project definition, which unfortunately could not be located

Creating multiple dynamic dashboards using Angular 4 after user authentication