Core: Support of .properties files

[gaetancollaud]

Hi,

Is there any way I can use ng2-translate with properties files ? We use properties files for all the rest of our application and I don't really want to use JSON only for a small part.

Content can be like:

menu.home=Home
menu.settings=My settings

Regards

[ocombe]

Yes, you would have to write a custom loader for that, it's really easy to do. For example here is my custom loader for server side rendering:

import {TranslateLoader} from "ng2-translate/ng2-translate";
import {Observable} from "rxjs/Observable";
var 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();
        });
    }
}

And then you change the loader to use in bootstrap:

bootstrap(App, [
    ...ROUTER_PROVIDERS,
    ...HTTP_PROVIDERS,
    provide(TranslateLoader, {
      useFactory: () => new TranslateUniversalLoader('assets/i18n', '.json')
    }),
    TranslateService
]);

In your case you can reuse all the code from the files loader and just change the part where it parses json for something else. You'll have to transform it so that it returns an object of key/values.

[gaetancollaud]

Wow, I wasn't expected a response so quickly. Thanks for sharing your code ! In the meantime I find a way to do it directly with gulp. This is even better because the transformation is done during the compilation.

var props2json = require('gulp-props2json');
var rename = require('gulp-rename');

gulp.task('copy:resources', [], function () {
    return gulp.src('./src/main/resources/lang/**/*.properties')
        .pipe(props2json())
        .pipe(rename(function (path) {
            path.basename = path.basename.replace('language_', '');
        }))
        .pipe(gulp.dest('src/main/webapp/i18n/'));

Regardless this two workarounds. Don't you think it could be great to have a _PropertiesTranslateLoader_ directly embedded in ng2-translate ? Since properties files are widely used in backend and standalone applications.

[ocombe]

I'd rather like it being an external library that people can install when they need it, that's the beauty of modularity.
Although I agree with you that doing it during compilation is nice too.

Or maybe we could just improve the files loader to be able to understand both json & properties, you could configure it at bootstrap (with default to json).

[zavakare]

@ocombe I am not understanding how a custom loader can be the solution? I was able to add the marker() to the constant file to extract the translation for my json file. I created a custom loader but maybe what I have inside is not working? because the value for my constant is not translated. Can you please elaborate how the logic looks for the custom loader? I dont need to call the getTranslations function, anywhere?

[zavakare]

I'd rather like it being an external library that people can install when they need it, that's the beauty of modularity.
Although I agree with you that doing it during compilation is nice too.

Or maybe we could just improve the files loader to be able to understand both json & properties, you could configure it at bootstrap (with default to json).

that would be awesome!!