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.