Last active
May 11, 2023 07:01
-
-
Save ocombe/593d21598d988bf6a8609ba5fc00b67e to your computer and use it in GitHub Desktop.
ng2-translate file loader for Angular Universal (server side)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {TranslateLoader} from "ng2-translate/ng2-translate"; | |
import {Observable} from "rxjs/Observable"; | |
import fs = require('fs'); | |
export class TranslateUniversalLoader implements TranslateLoader { | |
constructor(private prefix: string = 'i18n', private suffix: string = '.json') {} | |
/** | |
* Gets the translations from the server | |
* @param lang | |
* @returns {any} | |
*/ | |
public getTranslation(lang: string): Observable<any> { | |
return Observable.create(observer => { | |
observer.next(JSON.parse(fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8'))); | |
observer.complete(); | |
}); | |
} | |
} |
Keep it simple - I'm using
@angular/cli
file: src/shared/lang-switcher/custom-translate-loader.ts
import { en } from "assets/i18n/en"; import { srb } from "assets/i18n/srb"; import { TranslateLoader } from '@ngx-translate/core'; import { Observable } from 'rxjs/Observable'; export class CustomTranslateLoader implements TranslateLoader { public getTranslation(lang: string): Observable<any> { return Observable.create(observer => { if (lang === 'srb') { observer.next(srb); } else { observer.next(en); } observer.complete(); }); } }
file: src/app/app.module.ts
TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: CustomTranslateLoader } }),
Translation files
file: src/assets/i18n/en.ts
export const en = { menu: 'Menu', search: 'Search', };
file: src/assets/i18n/srb.ts
export const srb = { menu: 'Meni', search: 'Pretraži', };
Hope this will help someone ;-)
Amazing & Simple
Thnx
Keep it simple - I'm using
@angular/cli
file: src/shared/lang-switcher/custom-translate-loader.ts
import { en } from "assets/i18n/en"; import { srb } from "assets/i18n/srb"; import { TranslateLoader } from '@ngx-translate/core'; import { Observable } from 'rxjs/Observable'; export class CustomTranslateLoader implements TranslateLoader { public getTranslation(lang: string): Observable<any> { return Observable.create(observer => { if (lang === 'srb') { observer.next(srb); } else { observer.next(en); } observer.complete(); }); } }
file: src/app/app.module.ts
TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: CustomTranslateLoader } }),
Translation files
file: src/assets/i18n/en.ts
export const en = { menu: 'Menu', search: 'Search', };
file: src/assets/i18n/srb.ts
export const srb = { menu: 'Meni', search: 'Pretraži', };
Hope this will help someone ;-)
Worked well! 👍
custom-translate-loader.ts
for latest rxjs:
import { of } from 'rxjs';
import { en } from '../../../assets/i18n/en';
import { ar } from '../../../assets/i18n/ar';
import { TranslateLoader } from '@ngx-translate/core';
export class CustomTranslateLoader implements TranslateLoader {
public getTranslation(lang: string) {
if (lang === 'ar') {
return of(ar);
}
return of(en);
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks @vukasin-nikodijevic, your solution worked perfectly!
Also wanted to add my 2 cents:
Since the different language files are actually objects, I added some more attributes for example
"direction":"rtl"
and"textside": "text-right"
(for Bootstrap) to the Hebrew string file, and so I could use the language object throughout the application to control all the behavior related to the selected language.Also:
Each language file has a code field e.g.:
"code": "en"
and I changed the browser's document title like this:In app.component.ts:
constructor(
public translate: TranslateService,
private titleService:Title
) {
translate.addLangs([en.code, he.code]);
translate.setDefaultLang(en.code);
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en.code|he.code/) ? browserLang : en.code);
this.translate.get("HOME.TITLE").subscribe(title => {
this.titleService.setTitle(title);
});
}