Bug(scope): Scoping doesn't work in routes loaded with loadChildren

[CitrusyAlmond]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

Yes

Current behavior

The function provideTranslocoScope only applies the scopes assigned to the parent element. It doesn't seem to work either in the lazy loaded route file nor the child component's Type Decorator.

This is a screenshot of the main routes file.

This is a screenshot of the child routes file.

When using this._transloco.getTranslation(), it only shows the translations from the language.json file as well as those from the scope assigned in the parent element.

Expected behavior

The function provideTranslocoScope to not also apply the scopes assigned to it in the main routes file, but also those imported using the loadChildren function.

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

https://codesandbox.io/s/tmt5zn

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 
Angular: 
Node: 
Package Manager: 
OS:

Browser

No response

Additional context

No response

I would like to make a pull request for this bug

No

[shaharkazaz]

The issue with your reproduction is that you are not triggering a load for the lazy translation set.
When you use the transloco pipe in the main template, he triggers a load for the scoped translation. that's why we see that the translations for main are loading while the lazy ones are missing.

[CitrusyAlmond]

You are absolutely right, the use of the transloco pipe was dowloading the translation file, which could be read by the child component.

That said, after removing the template translation I find myself unable to load the provided scope without directly referencing it in the selectTranslate function, most likely due to a lack of understanding of the explanations given.

With a routes file such as this.

I encounter myself in this situation.

After using selectTranslate to bring the scope, any further translation of main.message will work. While this is fine when working with a singular scope, it causes problems when trying to work with multiple, as I'd have to use selectTranslate for each individual scope.

I apologize if my question might seem stupid, but I'm failing to come up with the solution to the issue.

[shaharkazaz]

@CitrusyAlmond There are no stupid questions 🙂

I'm trying to understand your use-case though. Do you only need translations inside the components? Transloco's loading mechanism was intended to be internal and not managed by the consumers. If you further explain your use-case I can maybe assist more.

Also, take a look at the preload langs plugin, it might be what you are looking for or you can take inspiration from the implementation code.

[CitrusyAlmond]

Do you only need translations inside the components?

There's some translations that are used in templates, however I also use them in a series of third party components like Kendo Notification which accepts a message to display.
As such, the plan was to have a scope for api messages and objects that would be translated in the component.ts for further use.
I guess the problems comes from not having found a method that alerts me of the scopes being loaded so that I can use my translation function (I tried using the translationLoadSuccess event, but as the text said, it wouldn't allow me to trigger it when the scopes are taken from the cache).

I gave the preload langs plugin a look, however from what I understood, I'd have to add all the scopes that I might want to use on components during the app, which might be too many.

So far, I came up with a really ugly implementation that allows me to check when the scopes are loaded by looping on the scopes array received from the TRANSLOCO_SCOPE value, and using firstValueFrom to await them.

While this "works", I know how ineffective it is, and would appreciate some guidance on a method that I might have missed, or a suggestion if a way is not already implemented.

Sorry for taking so long, and thank you for your time.