translate-method in .ts/.js classes does not work in IE about angular-l10n HOT 6 CLOSED

Hi,

the problem is not the browser, although it's possible that Chrome is so fast to complete the loading of the json file before uploading the application. The problem is you can not call the translate method before the http get request of the json file is completed.
If you want to get a translation into your component while loading the application, I have to change the LocalizationService class to emit an event when the translation changes, so that you can subscribe to the event in this way:

    this.localization.translationChanged.subscribe(

        // Generator or next.
        (value: boolean) => { console.log(this.localization.translate('KEY_FOR_RESOURCE')); }

    );

Tell me if this can be useful, and I'll implement the change.

from angular-l10n.

I added the commit to the LocalizationService class that allows you to subscribe to the event as explained above.
If you want to test it, you can do so:

• Uninstall this library from your application
• Download this repository
• Follow the instructions of the README file to build the library and install it in your application

If it solves your problem, I'll include the commit in the next version of the library.

from angular-l10n.

Hello robisim74,

Your implementation works wonderfully. Thank you very much.

There are still problems, however, when developping for more than one browser since Chrome is so fast. The translationChanged event does not get triggered for components loaded at application start in Chrome while it does be triggered in the Microsoft browsers.

At the moment, I have to set the translations inline when my variables are initialized for Chrome:

public title = this.localization.translate('TITLE_KEY');

For other browsers, I have to set them again in the subscribe method:

this.localization.translationChanged.subscribe((value: boolean) => this.title = this.localization.translate('TITLE_KEY'));

This is okay, I guess, but it leads a certain amount of code duplication when the translation method needs to be called inside .ts/.js.

Don't know a way to avoid that, however .

from angular-l10n.

Strange, I tested it and it works fine without initialize it. Can you post the code of your component? This evening I'll try it.

from angular-l10n.

Hi @djb12,

I confirm to you that in my test it's never necessary to initialize the values of translations for Chrome.

However, as regards the bootstrap component, you could solve definitively the problem by calling the updateTranslation method (which is responsible for the http request) at the end of the constructor:

@Component({
    selector: 'my-app',
    template: '<h1>{{ title }}</h1>'
})
export class AppComponent extends Locale {

    public title: string;

    constructor(public locale: LocaleService, public localization: LocalizationService) {
        super(null, localization);

        this.locale.addLanguage('en');
        this.locale.definePreferredLanguage('en', 5);
        this.localization.translationProvider('./resources/locale-');

        this.localization.translationChanged.subscribe(

            () => { this.title = this.localization.translate('TITLE'); }

        );

        this.localization.updateTranslation();
    }

}

Please note that in all the other components in an app where you have a router, you should still initialize variables with the translation, because these components are loaded only when they are required, and after the initial event , the new property translationChanged is only updated when the selected language changes.

from angular-l10n.

I released the new version of the library that includes the commit. Here you can also find an example of the document title translation.

from angular-l10n.