Context:
I'm trying to use ngx-translate in an angular library, and because I want to the library to use the assets of the library in the dist/ folder by default instead of hosting app assets, so I created a custom loader in the library module.
The problem:
When I don't use TranslateModule in the hosting app, the library translations works perfectly.
however when I add TranslateModule in the hosting app, the custom loader of the library becomes overriden by the translation loader in the hosting app.
please note that it's not translation is what is overriden, but the loader as a whole. Because even if the key-value is not in the host app translation files, they won't show.
I'm not sure why this happens, I tried to use TranslateModule.forChild in the library but it won't allow me to build when I do so..
why does this happen? any suggested solution?
Library module:
@NgModule({
declarations: [
// components here...
],
imports: [
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory
},
}),
],
exports: [
// components here...
TranslateModule
]
})
export class SampleModule { }
export function HttpLoaderFactory(): CustomHttpLoader {
return new CustomHttpLoader();
}
export class CustomHttpLoader implements TranslateLoader {
public getTranslation(lang: string): Observable<Object> {
return new Observable((subscriber) => {
let translations:any = {
ar: ar,
en: en
}
subscriber.next(translations[lang]);
})
}
}
App module in the hosting app:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
SampleModule, <----- library module
TranslateModule.forRoot({ <------ translate module of the hosting app, when I add this, custom loader in the library doesn't work anymore (it overrides the loader)
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
})
],
providers: [HttpClientModule],
bootstrap: [AppComponent]
})
export class AppModule { }
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http);
}