To ensure proper functionality, your primary module must incorporate the
TranslateModule.forRoot(transLoader)
function. Alternatively, you have the option to create a separate module as shown below and import it into your main module:
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FirestoreTranslateLoader } from "./firestore-translate-loader";
export function AngularFireFactory(db: AngularFirestore) {
return new FirestoreTranslateLoader(db);
}
const transLoader = {
loader: {
provide: TranslateLoader,
useFactory: AngularFireFactory,
deps: [AngularFirestore]
}
}
@NgModule({
declarations: [],
imports: [
TranslateModule.forRoot(transLoader),
],
})
export class TranslModule { }
All child modules should import the TranslateModule without using .forRoot(). Alternatively, merge it into the SharedModule like so:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
declarations: [],
imports: [
CommonModule,
TranslateModule,
],
exports: [
CommonModule,
TranslateModule,
]
})
export class SharedModule { }
In case you require downloading translations from Firebase, here is an example of the factory loader:
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from "rxjs";
import { AngularFirestore } from "@angular/fire/firestore";
export class FirestoreTranslateLoader implements TranslateLoader {
constructor(private db: AngularFirestore) { }
getTranslation(lang: string, prefix: string = 'langs'): Observable<any> {
return this.db.doc(prefix + '/' + lang).valueChanges() as Observable<any>;
}
}