Core: Missing Translation if value is empty.

Created on 12 Apr 2018  路  4Comments  路  Source: ngx-translate/core

I want to solve the missing translation issue.

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
providers: [
        {
          provide: TranslateLoader,
          useFactory: (createTranslationLoader),
          deps: [HttpClient],
        },
],

I have translation file like this

// en-US.json file
"Close": "Close",
"Get Started": "Get Started"
// da-DK.json file
"Close": "",
"Get Started": ""

this does not show the value for Get Started and Close when i choose da-DK as language.
I want it to show the key if value is empty

Please tell us about your environment:
"@ngx-translate/core": "^7.1.0",
"@ngx-translate/http-loader": "^1.0.1",

Angular version: 2.x.x
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Most helpful comment

Please note that the file has been deleted in the example project.

This is the link to the original (deleted) file: https://github.com/CodeAndWeb/ngx-translate-demo/blob/7d1b6d09cb3eaca47200a593daefa387491057db/ngx-translate-demo/src/app/pruning-loader.ts

All 4 comments

This example project contains a loader that removes empty translations. See ngx-translate-demo/blob/master/ngx-translate-demo/src/app/pruning-loader.ts

You can use the loader instead of the standard TranslateHttpLoader.

@CodeAndWeb
Thanks, it works now.

Please note that the file has been deleted in the example project.

This is the link to the original (deleted) file: https://github.com/CodeAndWeb/ngx-translate-demo/blob/7d1b6d09cb3eaca47200a593daefa387491057db/ngx-translate-demo/src/app/pruning-loader.ts

@jkanschik , thank you bro!
You also saved my day :D

Here is my working code:

export class PruningTranslationLoader implements TranslateLoader {
  constructor(private http: HttpClient, private prefix: string, private suffix: string) {}
  public getTranslation(lang: string): any {
    return this.http
      .get(`${this.prefix}${lang}${this.suffix}`)
      .pipe(map((res: Object) => this.process(res)));
  }
  private process(object: any) {
    const newObject: any = {};
    for (const key in object) {
      if (object.hasOwnProperty(key)) {
        if (typeof object[key] === 'object') {
          newObject[key] = this.process(object[key]);
        } else if (typeof object[key] === 'string' && object[key] === '') {
          // do not copy empty strings
        } else {
          newObject[key] = object[key];
        }
      }
    }
    return newObject;
  }
}

===============================

export function myLoader(http: HttpClient) {
  return new PruningTranslationLoader(http, yourUrl + '/assets/i18n/', '.json');
}

==================================


 TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: myLoader,
        deps: [HttpClient],
      },
    }),
Was this page helpful?
0 / 5 - 0 ratings