LoclString returned in place of the translated string

[eweap]

Hello,

I've found a bug when importing a translated string from another file.

Expected Behavior

To get the translated string

Current Behavior

$localize return string or a LoclString depending on context

LoclString {"", value: null, postProcess: false, initParams: Array(1)}

Steps to Reproduce

I've created a reproduction here: https://github.com/eweap/loclstring-bug

1. Run the project with yarn ng serve app
2. Inspect console to see differences

And thanks for the lib !

[Lavos96]

It is possible that it returns a LoclString object because the moment you ask for this translation, the file with these translations is not yet loaded.

[benjvoigt]

I have the exact same issue. I followed instructions https://github.com/loclapp/locl/blob/master/libs/core/README.md to set up locl. It works fine for any nested components. But my side menu is initialized in AppComponent which is the very first component. For some reason the translations are not available at that time. What can I do about it?

As a side note: I have some menu entries not rendered using *ngIf but once they get enabled I get the same error even tho all the static menu entries got translated properly. Hence the translations should be loaded already at that time.

[benjvoigt]

Further investigation tells.. with the plain $localize.loadTranslations the error is gone but the side menu is not translated.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { loadTranslations } from '@angular/localize';


if (environment.production) {
    enableProdMode();
}

fetch('/assets/i18n/en.json')
    .then(response => response.json())
    .then(data => {
        loadTranslations(data.translations);
        platformBrowserDynamic()
            .bootstrapModule(AppModule)
            .catch(err => console.error(err));
    });

However when using fetch and loadTranslations from locl I get the error is the same.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { loadTranslations } from '@locl/core';


if (environment.production) {
    enableProdMode();
}

fetch('/assets/i18n/en.json')
    .then(response => response.json())
    .then(data => {
        loadTranslations(data);
        console.warn('LOADED');
        platformBrowserDynamic()
            .bootstrapModule(AppModule)
            .catch(err => console.error(err));
    });

I am using angular 10.1.1

[benjvoigt]

Okay, so the thing is i have some object exported in another ts file which describes my side menu and contains some texts prefixed with $localize. This ts file is part of the very first AppModule which gets loaded in main.ts as it is imported. At that time the texts get translated, but the translations may not be available yet. The solution is to use dynamic imports instead of static imports in main.ts. This fixed the issue for me:

fetchTranslations('/assets/i18n/en.json').then(() => {
    import('@angular/platform-browser-dynamic').then(x => {
        import('./app/app.module').then(y => {
            x.platformBrowserDynamic().bootstrapModule(y.AppModule)
                .catch(err => console.error(err));
        })

    });
});