[typescript-angular] refactor service classes for reducing bundle sizes by ~20%

[daniel-sc]

This reduces bundle sizes of ESM bundles on the order of 20%.

Example (using https://esbuild.github.io/analyze/ on the result of ng build --stats-json):

original:

new:

@TiFu @taxpon @sebastianhaas @kenisteward @Vrolijkx @macjohnny @topce @akehir @petejohansonxo @amakhrov @davidgamero @mkusaka @joscha

PR checklist

• Read the contribution guidelines.
• Pull Request title clearly describes the work in the pull request and Pull Request description provides details about how to validate the work. Missing information here may result in delayed response from the community.
• Run the following to build the project and update samples:

  ./mvnw clean package || exit
  ./bin/generate-samples.sh ./bin/configs/*.yaml || exit
  ./bin/utils/export_docs_generators.sh || exit
  

  (For Windows users, please run the script in Git BASH)
  Commit all changed files.
  This is important, as CI jobs will verify all generator outputs of your HEAD commit as it would merge with master.
  These must match the expectations made by your contribution.
  You may regenerate an individual generator by passing the relevant config(s) as an argument to the script, for example ./bin/generate-samples.sh bin/configs/java*.
  IMPORTANT: Do NOT purge/delete any folders/files (e.g. tests) when regenerating the samples as manually written tests may be removed.
• File the PR against the correct branch: master (upcoming 7.x.0 minor release - breaking changes with fallbacks), 8.0.x (breaking changes without fallbacks)
• If your PR is targeting a particular programming language, @mention the technical committee members, so they are more likely to review the pull request.

[daniel-sc]

@TiFu @taxpon @sebastianhaas @kenisteward @Vrolijkx @macjohnny @topce @akehir @petejohansonxo @amakhrov @davidgamero @mkusaka @joscha anyone up for a review? happy about any feedback :)

[amakhrov]

Thanks for the pull request!
Look good to me.
Personally, I would define all those helpers as standalone functions instead of a class to inherit from. But it's more of a stylistic choice - should be good either way

[macjohnny]

Thanks for the pull request! Look good to me. Personally, I would define all those helpers as standalone functions instead of a class to inherit from. But it's more of a stylistic choice - should be good either way

+1

@daniel-sc would you be able to do that in a follow-up PR?

[daniel-sc]

@macjohnny @amakhrov Generally, I'm also favouring standalone functions, but here the parent class has the advantage of not repeating the member delcaration (see below) in each service class, which most likely has some impact on the bundle size - don't you think?

    protected basePath = '';
    public defaultHeaders = new HttpHeaders();
    public configuration: {{configurationClassName}};
    public encoder: HttpParameterCodec;

[macjohnny]

don't you think?

can you try it out?

[devflow]

@daniel-sc Hi, Could you please take a look at this comment?: 5f92de4#r153539042

[daniel-sc]

@devflow yes - this might actually be the cause for #20799 ! I'll make a PR to correct this..

[daniel-sc]

don't you think?

can you try it out?

@macjohnny finally found some time to test wether switching from the inheritance approach to static utils has some impact on the bundle size. For our project (larger spec) I get the following results:

approach	original size	bundled size
BaseService (current master)	285.3 kb	87.1 kb
Static utils (9ea90fc)	290.1 kb	87.8 kb

So the current approach's bundle size is ~1% smaller.
Personally, I'm not sure if the smaller bundle size oder the inheritance-free approach is more relevant..

[mirobo]

@daniel-sc I thought about an optimization like this too (I'm a bit late though xD). I wonder if you added the possibility to generate a global api.base.service.ts for the whole project (I have multiple APIs) so they could share the same basic code and then when configuring the actual APIs it would be required to set the path (or the path could be predefined in the specific api.service.ts file)?

[daniel-sc]

@mirobo not sure I understand. The base service is generated once per execution of the generator - normally if you have multiple separate APIs, you'd have separate folders with generated code (or even separate packages), so it would not make too much sense to "share" the base service. Also the base service is rather small, so the overhead of duplicating it is comparably low.

[mirobo]

@mirobo not sure I understand. The base service is generated once per execution of the generator - normally if you have multiple separate APIs, you'd have separate folders with generated code (or even separate packages), so it would not make too much sense to "share" the base service. Also the base service is rather small, so the overhead of duplicating it is comparably low.

you understood correctly, but I see the filesize overhead is minimal.. I didn't yet check in detail how all files are bundled, but I have around 15+ generated API clients (will only grow in the future), but maybe the best solution would be to lazy-load some of the clients. Generally I could think of a new type of client once Angular offers a "httpResource" variant specifically for POST/PUT.. would MAYBE would require less boilerplate (the boilerplate would be in Angular itself 😅).
But anyway, thanks for the clarification!