I'm using @ngx-translate for language handling in an Angular 5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded.
The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. How can I fix that?
In my lazyload modules i had to add this to imports:
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
also in lazyloaded component i did something like that:
import {TranslateService} from '@ngx-translate/core';
in constructor:
private translate: TranslateService
and finally onInit:
this.translate.use(language);
And it is working just fine.
I've also been struggling with the same problem and have yet to find a feasible answer.
The kind folks at Angular are working on i18n, but this may take more time.
While not ideal, you might want to check out the following article:
“How to split your i18n file per lazy loaded module with ngx-translate?” @frogeret https://medium.com/@TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f
ng serve but, I'm unable to build the app in prod mode i.e. ng build --prod. Any suggestion?You can check the ngstack/translate library that works for Angular and Ionic apps. Also provides support for lazy loading, page title translations, custom pipes and many other great features.
To implement @ngx-translate with lazy-loaded modules in an Angular application, you have to import TranslateModule twice: once in the main module as the root and once in each lazy-loaded module (or use a shared module) as a child.
For example:
app.module.ts
@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
]
})
lazy-loaded.module.ts
@NgModule({
imports: [
TranslateModule.forChild()
]
})
Then, the translate pipe will work fine in both eager-loaded and lazy-loaded components.
