(Multi-scope) Transloco pipe unnecessarily loads dependencies for all scopes in ProviderScope array

[kaitlynekdahl]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

Currently, for implementations like .selectTranslate() or the Transloco template directives, a scope can be explicitly provided to determine which dependencies to load. This means when using the multi flag for providing scopes, using these functions or directives will only load the necessary translations.

However, the Transloco pipe does not appear to support this distinction, and will map over and load all dependencies for any scopes present in the ProviderScope array, even if only some of those translations are needed for that component.

The source code in question can be found here: https://github.com/ngneat/transloco/blob/master/projects/ngneat/transloco/src/lib/transloco.pipe.ts#L60

For example, on the /lazy-multiple-scopes route in the sample app, if we only want to load dependencies for one scope using the pipe, the network tab will show that additional dependencies for unused scopes have been unnecessarily fetched as well. In the image below, notice that the /assets/i18n/lazy-page/en.json file is requested, even though it is not needed for the component currently rendered.

Expected behavior

Transloco pipe should support some mechanism of deriving the key's scope, and only loading translations for that scope.

(PR with suggested behavior linked in comments.)

Minimal reproduction of the problem with instructions

Stackblitz repro: https://stackblitz.com/edit/transloco-pipe-repro?file=src/app/lazy-multiple-scopes/lazy-multiple-scopes.component.html

To see loaded translation files, open the app in a separate window and view the Network tab in the console.

What is the motivation / use case for changing the behavior?

Loading translations for scopes that aren't immediately needed has performance impacts, especially if those translations are coming from an external CMS.

Environment

Angular version: 7.x.x - 9.x.x


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others: