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:
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
I would recommend the second one, thank you