Translation strings doesn't compile on reload

[bjorkblom]

Im using ngx-translate and ngx-translate-messageformat-compiler in a Angular 4.3.0 application. The translation works very well, but components that gets rendered on reload get it's translation from ngx-translate but doesn't compile with ngx-translate-messageformat-compiler. I need to reset the language or rerender the components to make that work.

Set up:

app.module.ts:

import {TranslateModule, TranslateLoader, TranslateCompiler} from '@ngx-translate/core';
import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
...
imports: [
      ...
      TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            },
            compiler: {
                provide: TranslateCompiler,
                useClass: TranslateMessageFormatCompiler
            }
        })
]

app.component.ts:

timeNow = new Date();
constructor(translate: TranslateService) {
        translate.setDefaultLang('en-GB');
        translate.use('en-GB');
}

app.component.html: <p [innerHtml]="'CURRENT_DATE' | translate:{DATE: timeNow}"></p>

i18n/en-GB.json:

{
    "CURRENT_DATE": "The date is now {DATE, date}"
}

Result in view: The date is now {DATE, date}

Same thing with all child components, but if I change route and go back again for an example, the compilation works as it should, when I reload the page the translation will not compile.

[lephyrus]

Thanks for the report. There's definitely a problem there, and I think it was an oversight when I implemented the compiler part in ngx-translate/core. If translation loading is pending, access to a translation is "queued" and receives the translated string as soon as it's ready - but the compile step is missing in that case.

This needs to be solved in core, so I'm closing this for the issue you've opened there: https://github.com/ngx-translate/core/issues/710