SoFunction
Updated on 2025-04-04

Angular 4 Dependency Injection Learning Tutorial FactoryProvider Configuration Dependency Objects (V)

Study Directory

  • Angular 4 Dependency Injection Tutorial One Introduction to Dependency Injection
  • Angular 4 Dependency Injection Tutorial Two Component Service Injection
  • Angular 4 Dependency Injection Tutorial Three Use of ClassProvider
  • Angular 4 Dependency Injection Tutorial 4 The use of FactoryProvider
  • Angular 4 Dependency Injection Tutorial 5 FactoryProvider configures dependency objects
  • Angular 4 Dependency Injection Tutorial Six Injectable Decorator
  • Angular 4 Dependency Injection Tutorial 7 Use of ValueProvider
  • Angular 4 Dependency Injection Tutorial 8: Usage of InjectToken

This article mainly introduces the relevant content about the FactoryProvider configuration dependency object in Angular 4 dependency injection. It is shared for your reference and learning. Let’s take a look at the detailed introduction below:

The development environment and development language of this series of tutorials:

  • Angular 4 +
  • Angular CLI
  • TypeScript

Basic knowledge

Console object

The Console object can be accessed in any global object, such as Window, WorkerGlobalScope, and special definitions provided through the property workbench. In the browser, we can access the console object through the following example:

('My nickname is semlinker');

The role of FactoryProvider

FactoryProvider is used to tell the Injector (injector) to return the dependency object corresponding to the Token by calling the function corresponding to the useFactory.

FactoryProvider interface

export interface FactoryProvider {
 // Used to set the token value associated with the dependent object. The token value may be Type, InjectionToken, // instance or string of OpaqueToken provide: any;
 // Set the factory function used to create objects useFactory: Function;
 // Dependency object list deps?: any[];
 // Used to identify whether multiple providers. If it is a multiple type, it returns the dependency associated with the token. // Object list multi?: boolean;
}

existFactoryProviderUse of this article, we have introduced some relevant knowledge about FactoryProvider. Next we will introduce how to configure dependencies using FactoryProvider.

FactoryProvider

As the saying goes, review the past and learn the new. Let’s first review the LoggerService service created in the previous section:

export class LoggerService {
 constructor(private enable: boolean) { }

 log(message: string) {
 if() {
  (`LoggerService: ${message}`);
 }
 }
}

The correct configuration of LoggerService is as follows:

@NgModule({
 ...,
 providers: [
 HeroService,
 {
 provide: LoggerService, 
 useFactory: () => {
 return new LoggerService(true);
 }
 }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Before continuing the introduction, let’s first learn about one of the major features of Angular:

Cross-platform development

Learn how to build applications based on Angular and reuse code and skills to build applications for all platforms. For example: Web applications, mobile web applications, native mobile applications and native desktop applications, etc.

That’s right, a major feature of the Angular framework is cross-platform development. Back to the topic, I wonder if readers have noticed that in the log() method in the LoggerService class, we directly use the () method to output debugging information. Although in most cases our application runs in a browser environment, there are compatibility issues with () (Learn more - Can I Use). In addition, if our applications need to run on other platforms in the future, problems will arise.

To solve the above problem, we can create a ConsoleService service, and the service needs to implement a unified Console interface. But the focus of this article is not here, so let's first simply implement a ConsoleService service:

export class ConsoleService {
 log(message) {
 (`ConsoleService: ${message}`);
 }
}

Next we need to update the previous LoggerService service:

export class LoggerService {
 constructor(private enable: boolean,
 consoleService: ConsoleService) { }

 log(message: string) {
 if () {
  (`LoggerService: ${message}`);
 }
 }
}

But when we update LoggerService and save it successfully, you will see the following exception information:

 (27,16): Supplied parameters do not match any signature of call target.

This indicates that the provided parameters do not match the signature of the call target, because in AppModule, the LoggerService is configured as follows:

{
 provide: LoggerService, 
 useFactory: () => {
 return new LoggerService(true);
}

At this time, the number of input parameters of the LoggerService constructor is two, so the above exception will be thrown. So how should we solve this problem? At this time, we need to use the deps attribute defined in the FactoryProvider interface to declare the object that LoggerService depends on.

Configure the deps properties

{
 provide: LoggerService, 
 useFactory: (consoleService) => {
 return new LoggerService(true, consoleService);
 },
 deps: [ConsoleService]
}

Update AppModule

@NgModule({
 ...,
 providers: [
 HeroService,
 ConsoleService,
 {
 provide: LoggerService, 
 useFactory: (consoleService) => {
 return new LoggerService(true, consoleService);
 },
 deps: [ConsoleService]
 }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

When the code is updated, then a gorgeous save operation is performed, and finally open your console, you will see the expected output information:

LoggerService: Fetching heros...

I have something to say

What are factory functions used for?

In real life, factories are used to produce products, such as shoe factories are used to produce shoes. The factory function corresponding to the useFactory property in the FactoryProvider interface is used to create dependency objects. In addition, the corresponding materials are required for producing a pair of shoes, such as soles, shoelaces, etc., and creating dependency objects may also require dependency on other objects. Therefore, the deps attribute is defined in the FactoryProvider interface to declare a list of dependencies.

Summarize

The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s learning or using Angular 4. If you have any questions, you can leave a message to communicate. Thank you for your support.