Using an Angular library module to inject the same service instance of an abstract class

Question

Using an Angular library module to inject the same service instance of an abstract class

Currently, I am in the process of developing a library and sample application using Angular 11. One specific requirement is to enable the consuming application to inject an implementation of a base class into the library. Within the library, I have already established default logic. In order to define a provider in the consuming app, I have structured it as follows:

// app.module.ts within the main application
providers: [
  {
    provide: 'MyServiceBase',
    useClass: DefaultMyService
  }
]

The base class itself is defined in the Library like so:

export abstract class MyServiceBase{
   abstract myFunction();
}

Furthermore, the default logic is implemented within the library as well:

@Injectable({
    providedIn: 'root',
})
export class DefaultMyService extends MyServiceBase {
...
}

To make use of this service within a component in the library, I inject it accordingly:

constructor(@Inject('MyServiceBase') private myService: MyServiceBase) {
...
}

However, a challenge arises when I notice that the instance of DefaultMyService injected into the consuming app differs from that in the library. While debugging the application, I observe that the code utilized in the consuming app refers to JavaScript exported by the library, whereas the code in the library itself is actually TypeScript.

I am curious if there exists a solution to ensure that the same instance is injected into both the library and consuming app?

angular typescript

Answer 1

Answer №1

I discovered the root cause of the issue after realizing that I had overlooked how the service in my library was initialized. It should not have been assigned the Inject token, as it was not meant to be dependency injected. Instead, an instance of the MyServiceBase class was being passed by the initializing class. The class responsible for initializing that object was using dependency injection without utilizing the token. By making the necessary changes to use the token, the issue was resolved.

Update -

In my particular scenario, I needed a component to have its own instance of a class (referred to as myNonDepInjectObj) to maintain separate state for each instance of the component on the page. Despite this requirement, I still wanted to incorporate a service that was dependency injected into that object. Here is the corrected code snippet which implements the token:

export class MyComponent implements OnInit {
  constructor(@Inject('MyBaseService') myService: MyBaseService) {
    const myNonDepInjectedObj = new MyObj(myService);
  }
}

Subsequently, here is the revised class definition for the obj class:

export class MyObj {
  constructor(myService: MyBaseService){
  }
}

Answer 2

I discovered the root cause of the issue after realizing that I had overlooked how the service in my library was initialized. It should not have been assigned the Inject token, as it was not meant to be dependency injected. Instead, an instance of the MyServiceBase class was being passed by the initializing class. The class responsible for initializing that object was using dependency injection without utilizing the token. By making the necessary changes to use the token, the issue was resolved.

Update -

In my particular scenario, I needed a component to have its own instance of a class (referred to as myNonDepInjectObj) to maintain separate state for each instance of the component on the page. Despite this requirement, I still wanted to incorporate a service that was dependency injected into that object. Here is the corrected code snippet which implements the token:

export class MyComponent implements OnInit {
  constructor(@Inject('MyBaseService') myService: MyBaseService) {
    const myNonDepInjectedObj = new MyObj(myService);
  }
}

Subsequently, here is the revised class definition for the obj class:

export class MyObj {
  constructor(myService: MyBaseService){
  }
}

Using an Angular library module to inject the same service instance of an abstract class

Answer №1

Similar questions

Is there a way to locate a model using a value within a OneToMany connection?

Substitute Customized Interface Type Identifier

Modifying Font Style in Angular 4 Material

What are the best methods for querying and updating a self-relation in Prisma?

What is the best way to limit a property and template literal variable to identical values?

Creating uniform-sized cards with CSS and Bootstrap

HTML element within a cell of an Angular material table

Why am I not receiving recommendations for the data types of a function parameter when there are multiple variations available?

Why do my messages from BehaviorSubject get duplicated every time a new message is received?

The functionality of changing the source to the "docs" folder is not supported

Having trouble getting the NextJS custom 404 page to display?

Seamless animation with Angular 4

Leverage the Node Short ID library in conjunction with Angular 6 using TypeScript

Iterate through a collection of objects and organize the data in a specific way

Is there a way to upgrade Angular from version 15 to 16 without encountering issues with ESBuild getting blocked and causing the update to fail?

Issue encountered: Upon executing 'ng add @angular/fire', an error was detected in the node_modules/firebase/compat/index.d.ts file while attempting to launch the Angular application

Running lint-staged on an Angular monorepo

Obtaining the host and port information from a mongoose Connection

What is the reason behind tsc (Typescript Compiler) disregarding RxJS imports?

After pressing the login button, my intention is to transition to a different page