Ngx-translate cloacking issue

When starting my app , the keys of the translations appears for a while. Is there a mechanism of cloacking?

You can create a handler that shows nothing instead of the key:

In AppModule:

	loader: {
		provide: TranslateLoader,
		useFactory: HttpLoaderFactory,
		deps: [HttpClient]
	missingTranslationHandler: {
		provide: MissingTranslationHandler,
		useClass: MyMissingTranslationHandler

Then, create the handler (class):

import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core';

export class MyMissingTranslationHandler implements MissingTranslationHandler {
	public handle(params: MissingTranslationHandlerParams) {
		return '';

Other option, specially in the case you prefer to use instant (synchronous) instead of get (observable), is to show your app pages only after the language file is loaded:


export class MyApp implements OnInit {
	public show: boolean = false;

	constructor(private translateService: TranslateService) { }

	public ngOnInit() {
		this.translateService.onLangChange.subscribe(() => = true);


<ng-container *ngIf="show">

You could make it different, showing a spinner, a skeleton page or the splashscreen for a better UX, but the above should do it.


I would recommend the second one, thank you