Angular2 Dependency Injection by Factory Method using Interface

Question

I'm trying to use Angular2 dependency injection but get the following error message:

error NG2003: No suitable injection token for parameter 'service' of class 'PaymentService'

app.module.ts - provider with factory method

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    PaypalPayment,
    CardPayment,
    {
      provide: PaymentService,
      useFactory: () => {
        return new PaymentService(new PaypalPayment());
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

payment.service.ts - injectable payment service

@Injectable()
export class PaymentService {

  constructor(private service: Payment) {
  }

  pay(amount: number) {
    console.log('Payment Service -> pay(...) is running');
    this.service.pay(amount);
  }
}

payment.interface.ts, card-payment.ts, paypal-payment.ts files

export interface Payment {
  pay(amount: number);
}

@Injectable()
export class CardPayment implements Payment {
  pay(amount: number) {
    console.log('Paid by card. Amount=', amount);
  }
}

@Injectable()
export class PaypalPayment implements Payment {
  pay(amount: number) {
    console.log('Paid via Paypal. Amount=', amount);
  }
}

Note: Everything works fine if I replace the interface "Payment" in PaymentService file with one of its implementations (PaymalPayment or CardPayment). But it's a pretty common case to have an interface there.

The full source code is here

git clone https://github.com/karenmargaryan/di-via-interfaces-issue
cd di-via-interfaces-issue
npm install
ng serve

Useme Alehosaini · Accepted Answer · 2020-03-28 13:10:55Z

2

In payment.service.ts :

Update the Constructor

//import { Inject } from '@angular/core';

constructor(@Inject(Payment) private service: Payment)

answered Mar 28, 2020 at 13:10

Useme Alehosaini

3,1266 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Karen Margaryan Over a year ago

Your version is working. Thank you very much for your reply. But do you understand what is the problem with my version? I even found an example like I wrote in Ari Lerner's book, but his version also doesn't work.

Useme Alehosaini Over a year ago

Sure, you're welcome. In order to inject service in a constructor, the service type should be decorated as @Injectable() and this is usually done when you use "ng g s" CLI command. In your case you are trying to inject the service of type Payment while Payment is not decorated as @Injectable() so you should do manual injection by @Inject() . If you found the answer beneficial, do not forget to mark the answer as accepted :)

Karen Margaryan Over a year ago

I agree with you about decorator, but there is an exception here. If I don't create an instance of "Payment" (it's an interface), and I inject something there, then why shall I decorate with "Injectable()". If you just replace the interface with base class (without decorator), it will work perfectly. And as I understand that is against your answer. Am I right? So the main secret here is why this works with "class Payment" and doesn't work with "interface Payment"... Anyway thank you for your effort and explaination .

Useme Alehosaini Over a year ago

@Inject decorator is only needed for injecting primitives. The primitive types are number, string, boolean, bigint, symbol, null, undefined, or object. In your case, the interface is considered primitive so it required this decorator.

Ruzihm Over a year ago

I skipped this answer at first because I thought there was no way this would be a reasonable fix, but it worked perfectly for me. Thanks!

Collectives™ on Stack Overflow

Angular2 Dependency Injection by Factory Method using Interface

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related