How to use inject to get multipul instances?

[formal finch]

I have FooService and BarService both are exposed actions functions:
And I want to get them in one variable (with typescript support, of course):

actions = { ...inject(FooService), ...inject(BarService) };

ngOnInit() {
  this.actions.getFoo();
  this.actions.getBar();
}

This works.

But is there a better way to do that without using the spread operator? I mean something like this?
actions = injectMany(FooService, BarService) and injectMany do the same results.
Is something like this possible to do?

https://stackblitz.com/edit/angular-ivy-n8wptg?file=src%2Fapp%2Ffoo.service.ts,src%2Fapp%2Fbar.service.ts,src%2Fapp%2Fapp.component.ts

[twilit mango]

You're spreading the properties of two different objects into one.
What are you trying to do?

[formal finch]

@twilit mango I have very big report service with functions like:
save, resolve, get, duplicate, publish, copy, search, sendEmail, reprocess, addToFavorite, removeFromFavorite, getFavorites, recentEmails, and so on..

each function is written with rxjs pipeline. and the pipeline is very big (can be 10 lines).
And all of those functions belong to ReportService, and I want to split them.
So I want to split them into small services.
and in actions, I'll get those functions into one variable.
another solution I don't want to do is to use inherit.

So here I go for smallest example, FooService and BarService

[twilit mango]

And all of those functions belong to ReportService, and I want to split them.
So I want to split them into small services.
why?

[formal finch]

Because it's easy to maintain

Easy to read

[robust salmon]

You could probably write something like injectMany yourself

[twilit mango]

I can't see any easing.
You're just adding duplicated code.

[robust salmon]

I don't think it's a pattern I would recommend anyone using though.

[formal finch]

But the typing it won't works

[robust salmon]

It can be written such that the types do actually work, although it's not the easiest thing to express in TS

But yeah, it fundamentally sounds like you have things in one service, you want to split them in DI and provide them separately, and then you want to recombine them into one service again?

[formal finch]

yes

[twilit mango]

How this

actions = { ...inject(FooService), ...inject(BarService) };

ngOnInit() {
  this.actions.getFoo();
  this.actions.getBar();
}

is more comfy than this?

ngOnInit() {
  this.reportService.getFoo();
  this.reportService.getBar();
}

[formal finch]

it's about spliting big service with many functions into smaller services by logic.
because all of those functions have something to do with report.
And because each function takes 10+ lines the file itself end up with 900 lines.

not the using of the combine

it is very easier that you have many small files (services) instead of one big service.

[robust salmon]

I would suggest either:

• actually split the service, and inject things separately, or
• keep everything in one service and inject it as a single item

[twilit mango]

If you can find a logic more fitting for the use of those functions in your app, split the service into some logical smaller services.
But if you can't find anything more granular than "reporting" feature, I'd say they belong together.

One service for a function just for the sake of splitting the file, doesn't sound like a great approach.

[formal finch]

Here is an example from my code:

readonly actions = {
    ...inject(ReportActions),
    ...inject(EmailActionsService),
    ...inject(UpcomingOfferingActionsService),
    ...inject(ReprocessActionsService),
    ...inject(PublishActionsService),
    ...inject(OpenOfferingActionsService),
    ...inject(TradehaltUiActionsService),
    ...inject(AlertsActionsService),
    ...inject(DialogActionsService),
    ...inject(DuplicateActionsService),
  };

and I can use them as:

actions.restoreReport(..)
actions.getCompanyNotes()

I expose them in my facade to the component.
one variable that have all the actions from the facade
So you tell me it's not good approach?

because in my component I'll need them all

[twilit mango]

It's really personal.
I can't find any advantage.

[formal finch]

no, it's 2-5 functions per service

each service have 2-5 functions

[twilit mango]

I'd suggest to look at the use you make of those services inside the app, and try to find a logical pattern to group them.

[formal finch]

well, this is the logical pattern I use..
because EmailActionsService has all the function that handle sending email from the report component

and update the report in the process.

also PublishActionsService handle all the publish and dialog and logic of the report.

@twilit mango It is very important to me to get feedback from you and @robust salmon 🙂

[twilit mango]

Cannot say anything else.
Still not in favor of splitting and re-merging.
Maybe Alx being more used to large codebases can give you a more educated answer.

[robust salmon]

TypeScript magic for injectMany: https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXy1QCtwMAKDATwAcAueKVSgSnscoG4AoLq6hAKqpcqACo4AkqgwgYAZ1IiAPAIB88ALzwyA+CAAeM1MDkMm8APzaA1vQHMNqgG44swePVQgns5nsMgxqZkZLYEqIiy8BIOzq7AflYSHvBePjDcfAgAwhg4MKLI1BAg4lJyGIxgIELKoupaov5GJvAA3gDa1iCUnsgAtgBGsgC69ISRMPAAagC+ltrTzYGtbV4A7mQAdDuwAOZybEys4ZPR80kpab5X3rLcXCjo2HjhJJgAsuxKTQYtpuwOiNVNsdllDvBRCdangytJZApMMpcvlCsVSpJUBUqjVhHgfqp1G0uPBSfAwHgKvAcMgMNRaUdKJp2rNuGSkPltBSsRh4HxqYg+TQQHI-MT2eyAPKDd4YLZQORyLB7VBkGl02kAGjepAoNGYzDZZNmJLJcAwyBg+HV9Iw3BNXFAkFgCGdivgADEcDgAMqyJxYartU2kxDesgnFxue08J3QODk6DugBCsD9MADQfFZMGsAj9CjwBjXG5VLgpi0hFlXyYZC9vv9gZA2tTMHTmZAhq45a2YZwEe4PdzMAHXCAA

[formal finch]

@robust salmon YOU ARE THE MAGIC!!
WOW!
I was this thing impossible to do!
thank you so much alex!! thank you!!