Avoid duplicate translations in @ngx-translate

Question

I am creating an Angular app and I decided against using built-in i18n and instead use ngx-translate (mostly ease of setup/use).

I want the app to default to english and lazy load translations over HTTP if requested.

For example in the component's HTML I type:

<h1 translate>
    We build apps
</h1>

and provide e.g. a "de.json" file with the translation using the HttpTranslateLoader.

{
    "We build apps": "Wir bauen apps"
}

The problem I face is that I can successfully switch to the German locale but not back without providing another "en.json" with duplicate translations.

{
    "We build apps": "We build apps"
}

Is there any way to to have the app go back to English without having to duplicate all English translations?

Answer 1

One solution could be to create MissingTranslationHandler and just return the key.

Answer 2

Thanks to PeS I was able to solve the issue, but only creating the handler was not enough.

I also had to add an empty en.json file with only {} as content, next to the other translations.

export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams) {
        return params.key;
    }
}

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/locale/', '.json');
}

TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient],
        },
        missingTranslationHandler: {
            provide: MissingTranslationHandler,
            useClass: MyMissingTranslationHandler,
        },
        useDefaultLang: false,
    }),