ng2-translate file loader for Angular Universal (server side)

translateUniversalLoader.ts

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();
        });
    }
}

Hi everyone, I was trying to handle the universal loader in a more programmatic way, and ended up releasing the universal-loader package on github (https://github.com/fulls1z3/ngx-translate/tree/master/packages/%40ngx-universal/translate-loader) as well as on npm (https://www.npmjs.com/package/@ngx-universal/translate-loader).

It basically accepts the loader for the browser platform as a parameter, and provides the translations to the server platform using fs.

You can visit the ng-seed/universal for demo usage/instructions.

@ocombe, as a non-contributor, I didn't have chance to create a repo under ngx-translate. But if you think it would be useful for others, you can fork/copy and amend this package to distribute under ngx-translate.

how i can use ngx-universal/translate-loader with an angular cli project with universal support

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 ;-)

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);
  }
}