Issue with multiple modules and lazy loading

[mscudlik]

Hello Roberto,

It seems that there is an issue with angular2localization if you are using it with with multiple modules and lazy loading.

Somehow the texts are not always translated and you also do not see the i18n "key", especially in internet explorer / edge.

Here is also a small video (Foobar is the translated text):

I have created a demo project (https://github.com/matthiasscudlik/angular2localization-issue) with some more explanation in the README.md so that you can reproduce it. Just run ng-serve and go to http://localhost:4200/#shared

Did i do something wrong or is it a bug? For me it seems to be an issue of the service instance management across modules.

Thanks a lot for providing this great library and best regards,
Matthias

[robisim74]

Hi Matthias,

thanks for the great reporting. I'll give it a look and let you know.

Greetings,

Roberto

[robisim74]

Hi Matthias,

this is not a problem of Lazy loading: the problem is that the shared coomponent doesn't extend the Locale class, so the lang parameter is not passed when the http request of the json file is completed.
If sometimes it works is just a case: some browsers as Chrome use the cache on refresh, and http request is completed before the view is rendered. In any case it would not work when language changes.

About the Lazy loading:

• in app.module.ts you have to import only the modules: you don't need to provide the LocalizationService and LocaleService, because they are provided in forRoot method
• in shared.module.ts it is correct to use the modules without forChild method, because you are providing only one provider for the whole app: instead, if you want use a different and lazy loaded provider, you can follow this instructions: https://github.com/robisim74/angular2localization/blob/master/doc/spec.md#5. Also the list module/component of the sample app is built in this way: https://github.com/robisim74/angular2localization/tree/gh-pages

Thanks for your interest in this project!

Roberto

[mscudlik]

Hi Roberto,

thanks a lot for your explanation, this way everything works and now i think i understand how it works :)

Best regards,
Matthias

[Ghyath-Serhal]

Hello,

I had the same problem as matthiasscudlik, and it worked fine, but I still have one problem.
I added the below 2 lines in my component

<div translate>NUMBER_IS_INVALID</div>
{{ 'MENU' | translate:lang}}

First 1 worked fine, but the pipe did not return any translation, just blank.

Any advise.
Thank you.

[robisim74]

Hi @Ghyath-Serhal,

I don't understand the first line: NUMBER_IS_INVALID.

About the second line, the pipe expects the lang parameter, and not a string.

[Ghyath-Serhal]

Hello @robisim74 .
Thank you for your fast answer, I updated my answer above.
The first line is working correctly. As for the second line I also tried it also with lang parameter. still is not working.

[robisim74]

Did you extend Locale class in your component?

[Ghyath-Serhal]

oops, My fault.
Now it is working fine.
Thank you.

[robisim74]

I close this issue. If you need, open a new issue.

Greetings