Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
});
}
}
@SamVerschueren

This comment has been minimized.

Show comment
Hide comment
@SamVerschueren

SamVerschueren Dec 17, 2016

To import CJS modules in TypeScript, use import fs = require('fs');. That's the recommended way.

SamVerschueren commented Dec 17, 2016

To import CJS modules in TypeScript, use import fs = require('fs');. That's the recommended way.

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Jan 1, 2017

Thanks, updated

Owner

ocombe commented Jan 1, 2017

Thanks, updated

@elliotwesoff

This comment has been minimized.

Show comment
Hide comment
@elliotwesoff

elliotwesoff Mar 2, 2017

It would be really great if there were something in the core docs mentioning this file. However, how is FS supposed to work from the browser? I've been using BrowserFS to get file access, but it only works for the browser's local storage. Is there something I'm missing for this?

P.S. import {TranslateLoader} from "ng2-translate/ng2-translate" should be changed to import {TranslateLoader} from "@ngx-translate/core" to match the new package name.

elliotwesoff commented Mar 2, 2017

It would be really great if there were something in the core docs mentioning this file. However, how is FS supposed to work from the browser? I've been using BrowserFS to get file access, but it only works for the browser's local storage. Is there something I'm missing for this?

P.S. import {TranslateLoader} from "ng2-translate/ng2-translate" should be changed to import {TranslateLoader} from "@ngx-translate/core" to match the new package name.

@ilDon

This comment has been minimized.

Show comment
Hide comment
@ilDon

ilDon Mar 6, 2017

@elliotwesoff, I was successfully using this code with ng2-translate, but after upgrading to ngx-translate I get an error in the terminal, I've posted the issue on StackOverflow.
Should it be sufficient to update only the import statement? In my case it's not working unfortunately.

ilDon commented Mar 6, 2017

@elliotwesoff, I was successfully using this code with ng2-translate, but after upgrading to ngx-translate I get an error in the terminal, I've posted the issue on StackOverflow.
Should it be sufficient to update only the import statement? In my case it's not working unfortunately.

@hantsy

This comment has been minimized.

Show comment
Hide comment
@hantsy

hantsy Apr 16, 2017

@elliotwesoff If you are using webpack, add json loader to load JSON directly.

import en from './i18n/en.json';

hantsy commented Apr 16, 2017

@elliotwesoff If you are using webpack, add json loader to load JSON directly.

import en from './i18n/en.json';
@fulls1z3

This comment has been minimized.

Show comment
Hide comment
@fulls1z3

fulls1z3 May 1, 2017

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.

fulls1z3 commented May 1, 2017

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.

@ysus

This comment has been minimized.

Show comment
Hide comment
@ysus

ysus May 30, 2017

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

ysus commented May 30, 2017

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

@vukasin-nikodijevic

This comment has been minimized.

Show comment
Hide comment
@vukasin-nikodijevic

vukasin-nikodijevic Jun 15, 2017

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

vukasin-nikodijevic commented Jun 15, 2017

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

@chriseugenerodriguez

This comment has been minimized.

Show comment
Hide comment
@chriseugenerodriguez

chriseugenerodriguez Jun 26, 2017

any1 had issues with integration and resolved it? can use your help. ngx-translate/core#581

chriseugenerodriguez commented Jun 26, 2017

any1 had issues with integration and resolved it? can use your help. ngx-translate/core#581

@mchambaud

This comment has been minimized.

Show comment
Hide comment
@mchambaud

mchambaud Jul 11, 2017

That loader will not work with Angular-cli until Angular teams resolve node modules.

mchambaud commented Jul 11, 2017

That loader will not work with Angular-cli until Angular teams resolve node modules.

@mchambaud

This comment has been minimized.

Show comment
Hide comment
@mchambaud

mchambaud Jul 11, 2017

@vukasin0 this solution will bundle all translations into your app. This will be problematic for larger applications...

mchambaud commented Jul 11, 2017

@vukasin0 this solution will bundle all translations into your app. This will be problematic for larger applications...

@philip-firstorder

This comment has been minimized.

Show comment
Hide comment
@philip-firstorder

philip-firstorder Jul 1, 2018

This file loader created a lot of problems for me, from AOT compilation errors to lint errors to big translations bundles.

For Angular Universal just I successfully used the prerender from https://github.com/angular/universal-starter with a default language.

philip-firstorder commented Jul 1, 2018

This file loader created a lot of problems for me, from AOT compilation errors to lint errors to big translations bundles.

For Angular Universal just I successfully used the prerender from https://github.com/angular/universal-starter with a default language.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment