Ngx-translate: load i18n json from firebase to ionic3
In Ionic3 app, how can I load the JSON language for ngx-translate? The current approach, given on github , is about storing JSON files for each language in the assets folder. The problem with this approach is that every time I have to add new language support, I need to release a new version of the application. Is there a way to load JSON from Firebase?
source to share
I managed to create a new TranslateLoader that will be fetched from Firebase. Here is the code:
import {AngularFireDatabase} from 'angularfire2/database';
import {TranslateLoader} from "@ngx-translate/core";
export class TranslateFirebaseLoader implements TranslateLoader {
constructor(public db : AngularFireDatabase) {}
/**
* Gets the translations from firebase
* @param lang
* @returns {any}
*/
public getTranslation(lang: string): any {
return this.db.list('/translations/'+lang)
.map(data => {
let fields={};
data.forEach(field =>{
fields[field.$key]=field.$value;
});
return fields;
});
}
}
source to share
OK I managed to get it to work like this:
app.module.ts
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
// Should work with "AngularFireDatabase" too. But I want it to work offline
import { AngularFireOfflineDatabase } from 'angularfire2-offline/database';
import { TranslateFirebaseLoader } from './TranslateFirebaseLoader';
export function createTranslateLoader(db: AngularFireOfflineDatabase) {
return new TranslateFirebaseLoader(db, '/my/firebase/path');
}
@NgModule({
imports: [
// ...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [ AngularFireOfflineDatabase ]
}
}),
// ...
],
// ...
})
export class AppModule {}
TranslateFirebaseLoader.ts
const TranslateFirebaseLoader = (function () {
function TranslateFirebaseLoader(db, path) {
this.db = db;
this.path = path;
}
/**
* Gets the translations from the server
* @param langCode
* @returns {any}
*/
TranslateFirebaseLoader.prototype.getTranslation = function(langCode) {
return this.db.object(`${this.path}/${langCode}`);
};
return TranslateFirebaseLoader;
}());
export { TranslateFirebaseLoader };
Obviously, to make it work, change the path you are using on Firebase (no language code in it). For example, in this case, the application will try to retrieve data from /my/firebase/path/en
if the language code "en" is active.
source to share