In my Angular2 application, I have a translate pipe. The LanguageComponent is the parent component for all others in which it reads the URL to determine the language and then adds it to the translate service that the pipe uses:
{ path: ':lang', component: LanguageComponent,
children: [
{ path: 'search', component: SearchComponent },
]}
Although everything functions correctly with the correct values being set in the translate service and parameters, there is an issue in the GUI:
{{ 'label' | translate }}
The problem arises because the pipe is being compiled before the LanguageComponent, causing the 'label' value to default to 'en-us' always.
The translate service functionality is as follows:
public defaultLanguage = 'en-us';
getCurrentLanguage(): any {
if (this.locale == null) {
this.locale = window.navigator.language == null ? this.defaultLanguage : window.navigator.language;
}
return this.locale;
}
While the route returns the correct value, setting a debugger onInit within LanguageComponent and another one inside the translate service shows that the service's debugger fires up first, reading the default value instead of the URL value.
If anyone knows how to resolve this issue, please advise!