Skip to content

Instantly share code, notes, and snippets.

@ocombe
Last active May 11, 2023 07:01
Show Gist options
  • Save ocombe/593d21598d988bf6a8609ba5fc00b67e to your computer and use it in GitHub Desktop.
Save ocombe/593d21598d988bf6a8609ba5fc00b67e to your computer and use it in GitHub Desktop.
ng2-translate file loader for Angular Universal (server side)
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();
});
}
}
@OmarioHassan
Copy link

OmarioHassan commented May 19, 2020

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

@Arian94
Copy link

Arian94 commented Nov 10, 2020

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! 👍

@all2pie
Copy link

all2pie commented Sep 21, 2021

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