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(); | |
}); | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
Thanks, updated |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
@elliotwesoff, I was successfully using this code with |
This comment has been minimized.
This comment has been minimized.
@elliotwesoff If you are using webpack, add json loader to load JSON directly.
|
This comment has been minimized.
This comment has been minimized.
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 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 |
This comment has been minimized.
This comment has been minimized.
how i can use ngx-universal/translate-loader with an angular cli project with universal support |
This comment has been minimized.
This comment has been minimized.
Keep it simple - I'm using file: src/shared/lang-switcher/custom-translate-loader.ts
file: src/app/app.module.ts
Translation filesfile: src/assets/i18n/en.ts
file: src/assets/i18n/srb.ts
Hope this will help someone ;-) |
This comment has been minimized.
This comment has been minimized.
any1 had issues with integration and resolved it? can use your help. ngx-translate/core#581 |
This comment has been minimized.
This comment has been minimized.
That loader will not work with Angular-cli until Angular teams resolve node modules. |
This comment has been minimized.
This comment has been minimized.
@Vukasin0 this solution will bundle all translations into your app. This will be problematic for larger applications... |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
@vukasin-nikodijevic your simple solution worked for me thank you. |
This comment has been minimized.
This comment has been minimized.
Thanks @vukasin-nikodijevic, your solution worked perfectly! |
This comment has been minimized.
This comment has been minimized.
Amazing & Simple |
This comment has been minimized.
This comment has been minimized.
Worked well! |
This comment has been minimized.
To import CJS modules in TypeScript, use
import fs = require('fs');
. That's the recommended way.