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 ]
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],
},
}),
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