Ngx-translate cloacking issue

Ionic Framework ionic-v3
1

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

2

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

In AppModule:

TranslateModule.forRoot({
	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:

app.component.ts:

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

	constructor(private translateService: TranslateService) { }

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

app.component.html:

<ng-container *ngIf="show">
    ...
</ng-container>

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

2 Likes
3

I would recommend the second one, thank you