-
-
Save ocombe/593d21598d988bf6a8609ba5fc00b67e to your computer and use it in GitHub Desktop.
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(); | |
}); | |
} | |
} |
any1 had issues with integration and resolved it? can use your help. ngx-translate/core#581
That loader will not work with Angular-cli until Angular teams resolve node modules.
@Vukasin0 this solution will bundle all translations into your app. This will be problematic for larger applications...
This file loader created a lot of problems for me, from AOT compilation errors to lint errors to big translation bundles.
For Angular Universal I successfully used the prerender from https://github.com/angular/universal-starter with a default language.
@vukasin-nikodijevic your simple solution worked for me thank you.
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);
});
}
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);
}
}
Keep it simple - I'm using
@angular/cli
file: src/shared/lang-switcher/custom-translate-loader.ts
file: src/app/app.module.ts
Translation files
file: src/assets/i18n/en.ts
file: src/assets/i18n/srb.ts
Hope this will help someone ;-)