Resolved translations are not re-used when using different aliases

I’m submitting a…

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

Current behavior

Whenever you provide an alias in a component/module using TRANSLOCO_SCOPE, it causes the other pages that use the same translation file without an alias to break. After debugging I found out that you only have one scope key per translation file, meaning you have to always use scope or always use alias if you want your translations to be fine. In the video below you can see the behaviour:

https://www.youtube.com/watch?v=BX3WfFI7ZXg

Expected behavior

You should be able to provide a different alias or ignore the alias in specific use-cases without breaking the translation file.

Minimal reproduction of the problem with instructions

The video demonstrates it: https://www.youtube.com/watch?v=BX3WfFI7ZXg

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

To make this library even better and get to use aliasses and scopes together in harmony 😃

Environment

Angular version: 7.2.15


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: 10.16.0
- Platform:  Windows

Others:

[mohamedaarab1994]

@ArielGueta You’re missing the point. Perhaps I didn’t make myself clear enough. Let me explain the behavior in a scenario:

There are two pages that are lazy loaded, we’ll call them GeneralInformationComponent and PriceInformationComponent. We also have a translation file named offer-information.json that is shared among these two pages.

In the page GeneralInformationComponent we want to define the scope like this:

{ provide: TRANSLOCO_SCOPE, useValue: { scope: 'offer-information', alias: 'OfferInformationGeneral'}}, and use it in our view like this: {{'OfferInformationGeneral.Content' | transloco}}

in the page PriceInformationComponent we want to definte the scope like this:

{ provide: TRANSLOCO_SCOPE, useValue: { scope: 'offer-information', alias: 'OfferInformationPrice'}}, and use it in our view like this: {{'OfferInformationPrice.Content' | transloco}}

If you were to navigate to these pages via router navigation (going from PriceInformationComponent to GeneralInformationComponent) Only one of these pages would load in the translation file while the other page would show you the translation key, because the translation file was registered by the first served component. There is a cache system that checks whether a file has loaded or not regardless of what scope or alias you assign to the file and prevents it from loading the file again. This causes the transloco library to assign the file to only one key (in this case to OfferInformationPrice, because you were visitting PriceInformationComponent first).

The video also demonstrates this behavior.

[chriszrc]

@itayod I’m running into a related issue. I’m started to use route resolves to preload translation files using translocoService.load(), but the translations stop working when I use that approach, because originally the components were just using translations in the templates, so adding:

{provide: TRANSLOCO_SCOPE, useValue: {scope: "upload/uploadForm", alias: "uploadForm}},

and using:

t(uploadForm.mykey)

worked just fine. However if I try to preload the translations, the load() method apparently doesn’t have the option of using a custom alias, and because the translations are already loaded now, the component doesn’t also load the translations again under the custom alias, so all the template translations are broken. I could update the template translations to match the default “alias” you get when calling load():

t(uploadUploadForm.mykey)

but that’s annoying. Is there any way to set an alias when using load()?