What steps can I take to turn a decorated service into an injectable component?

I created a decorator factory function that looks like this:

 export function CustomDecorator (dummyProp: string) {
    
    return function<T extends {new (...args: any[]): any}> (ctor: T) {
        @Injectable()
        class MyCustomClass extends ctor {
            myProp = dummyProp;
            constructor(..._: any[]) {
                super(_);
            }
        }
        return MyCustomClass;
    }
}

Next, I have a service that I want to make injectable and decorate using the function above:

@Injectable()
@CustomDecorator('helloWorld')
export class MyService {
   /* ... */
}

Unfortunately, when I try to use it, I encounter the following error: No provider for MyCustomClass!

Can someone help me figure out how to solve this issue?

Answer №1

After some trial and error, I was able to find a solution by explicitly defining a service factory like so:

@NgModule({
  ...
  providers: [
  {provide: CustomService, useFactory: () => new CustomService()}
]
})

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

Employing Google Fonts in Angular results in a network error with codes [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]

I have been encountering numerous network errors similar to the following: > Request URL: https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300[_ngcontent-c6];400[_ngcontent-c6];600[_ngcontent-c6];700&display=swap > Reques ...

I am experiencing difficulties with bringing in node modules into my project

Trying to incorporate @mui/styles into my React project resulted in encountering some errors as shown below. npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.0" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

Creating a Variety of Files in the Angular Compilation Process

Currently, I am developing an Angular project and faced with the task of creating various files during the build process depending on certain conditions or setups. I would appreciate any advice on how to accomplish this within the Angular framework. I att ...

Is there a way to ensure that the observer.next(something) received the value before executing observer.complete()?

I have been working on an Angular app where I am using a resolver to preload data in the component. Below is the code for the resolver: resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): void { return Observable.create(observer => { ...

Typescript: Firebase App type does not include delete, installations, name, or options properties

Exploring the realm of Typescript and its compatibility with Firebase has been a recent endeavor of mine. I've created a FirebaseProvider that requires a Firebase app to be configured in the following manner: import firebase from "firebase/app&qu ...

Split Angular's Http POST request into several separate calls

I am in need of an RxJs operator that will help me serialize posts into multiple chunks to prevent timeouts due to posting too many items at once. Below is an example of what I am looking for: merge( chunk(items, 50).map( chunkItems => this.http. ...

TypeScript does not verify keys within array objects

I am dealing with an issue where my TypeScript does not flag errors when I break an object in an array. The column object is being used for a Knex query. type Test = { id: string; startDate: string; percentDebitCard: number, } const column = { ...

Angular pagination refers to the process of dividing a large

Currently utilizing ngx-pagination https://www.npmjs.com/package/ngx-pagination app.module: import { NgxPaginationModule } from 'ngx-pagination'; @NgModule({ declarations: [ AppComponent, ... ], imports: [ ... NgxPaginat ...

`How can I troubleshoot an Angular project's *ngIf structural directive using Chrome?`

Seeking a way to include Angular source code and source map into my Angular CLI project for easier debugging of directives such as *ngIf in Chrome. Is there a method to attach a debugger to ng_if.ts using configuration in angular.json or by adding a sourc ...

Navigating the diverse types of React HTML DOM events within a function concatenation

Question: Is it possible to merge different HTML DOM event types in Typescript? (I am aware of the option to split my function into two separate functions to avoid this error, but I would like to find another solution) Here is an example of my component ...

Creating validation rules for a form that includes a From Date and a To Date

Looking to implement validation for the from date and to date fields within a template-driven form. Is there a way to ensure that the "from date" is always greater than the "to date," and vice versa? Additionally, I would like to find a way to reuse this ...

What is the most effective way to manage over 100 cases in Typescript without getting overwhelmed?

My aim is to streamline the processing of different types of batches using one program by specifying the batch type in the .env file. The reason for wanting to process all batches with a single program is to avoid configuring a separate Continuous Deploym ...

Transform Angular into a library

I've been exploring different options but still haven't nailed down the best approach. I've developed an Angular library with custom components, which I'm converting into Web Components to be used in non-Angular applications. But to mak ...

Distinguish between a function and a constructor during execution

As I work with TypeScript, I am creating a function that accepts an error factory as an argument. This factory can be either a class name or a function. The function looks something like this: // Alias from class-transformer package type ClassConstructor& ...

Strange actions observed in JavaScript addition operations

In my Angular application, I have the following TypeScript function: countTotal() { this.total = this.num1 + this.num2 } The value of num1 is 110.84 and the value of num2 is 5.54. I determined these values by watching this.num1 and this.num2 in the C ...

Gatsby, in combination with TSC, does not properly transpile the rest operator

I'm attempting to integrate TypeScript with Gatsby following the guidelines provided here. However, I am encountering an issue where the tsc command is failing to transpile the spread (...) operator and producing the error shown below: WAIT Compili ...

Having trouble with my first Angular 2 application that is meant to print "My First Angular 2 App"?

I have created a program to display the message "My First Angular 2 App", but I am facing issues with the output. Can anyone help me identify where I might be going wrong? environment_app.component.ts import { AnotherComponent } from './anotherCompo ...

Issue: The inject() function can only be executed within an injection context

Even after following the most recommended solutions online, I am still facing an issue that says Error: inject() must be called from an injection context. In addition to this error, I am also receiving multiple warnings such as: Warning: ###/src/ap ...

Binding user input to a preset value in Angular with data binding

My goal is to have a predefined input form with the email provider value preset. However, when I try to submit the form without modifying it, it does not upload anything to Firebase unless I manually delete the value and re-enter it. <input class="butt ...

Error: Unable to generate MD5 hash for the file located at 'C:....gradle-bintray-plugin-1.7.3.jar' in Ionic framework

When attempting to use the command ionic cordova run android, an error occurred that prevented the successful execution: The process failed due to inability to create an MD5 hash for a specific file in the specified directory. This issue arose despite suc ...