Get NGX translate to work in a NX workspace lib

Question

I'm trying to get translations work for both the app components and the lib components. For now I can only get app or lib components to work, but not at the same time.

Structure:

• Created an ionic app with a home component
• Created a "features/ui" lib with a login component
• Created a "core/localization" lib with a translation component (I have the translation files here and in angular.json I copy the files to the app)

I can make the home component in the app work if I add import TranslateModule and provider in the libs/features/ui/ui.module.ts:

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormsModule,
    CommonModule,
    ToastrModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
     }
})],
providers: [
  {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService, Injector],
      multi: true
  }
],
declarations: [LoginComponent],
exports: [
  LoginComponent
]
})

Now the translations for the login works, but the home component just writes out the translation key "home.greet"

I can also make the login component in the app work if I instead add the same import TranslateModule and provider in the libs/core/core.module.ts

If I add the code in the two different place at the same time, the login will only translate, but the home component again just writes out the translation key "home.greet"

Also it seems wrong to initialize it twice, so where should I put my import and provider for the translations and how should I manage to translate in both places?

Answer 1

I was able to solve the same with the folowing steps:

1. Maintain lib specific translations in lib->feature->src->assets->i18n folder.

2. Update angular.json app->architect->build->options->assets with

   { "input": "libs/feature/src/assets/i18n", "glob": "*.json", "output": "assets/i18n/feature" }

3. Update Translate module forChild() in Lib->feature.module

TranslateModule.forChild({
          loader: {
            provide: TranslateLoader,
            useFactory: (http: HttpClient) => {
              return new TranslateHttpLoader(
                http,
                `${environment.i18nPrefix}/assets/i18n/feature/`,
                '.json'
              );
            },
            deps: [HttpClient]
          },
          isolate: true
        })

4. Fire the following effect in feature module

 setTranslateServiceLanguage$ = createEffect(
    () =>
      this.store.pipe(
        select(selectSettingsLanguage),
        distinctUntilChanged(),
        tap(language => this.translateService.use(language))
      ),
    { dispatch: false }
  );

Thanks to the below repo from tomastrajan https://github.com/tomastrajan/angular-ngrx-material-starter