Is it possible to share a common library with its translation to all other libraries and apps with NX?

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Dear Ngneat team,

We are currently migrating from ngx-translate to transloco because we use NX for handling several Angular apps and libs. In addition, we would like to separate the translations by module. The following example demonstrates it quite well, how we can use transloco with different scopes for each app and lib:

Example with NX: https://github.com/NetanelBasal/transloco-with-nx-libs

Unfortunately, I am stuck with the use case when you add a third library. For example, let’s name it “common”. This library contains all shared “dumb” components and is imported in practically all other libraries as well as by the (lazy) modules in the app itself. The common library has its own translations.

Update: 15.11.2020 How the dependency could look like:

What I am missing in the example above is exactly this use case. I am assuming, that this is a common use case and should be possible with Transloco but I cannot get it to work. Maybe I am missing anything? Please see more details in the minimal reproduction section.

Thank you very much for your help.

Current behavior

The translations are not loaded:

In the logs, I got a missing error:

Missing translation for ‘common.validations.required’

Expected behavior

The translations are loaded and rendered.

Minimal reproduction of the problem with instructions

Clone the project above and then generate a new library as follows:

nx g library common

Under libs/common/src/lib I created a new folder i18n and added two translation files en.json and es.json.

Example en.json (same for es.json):

{
  "validations.required": "This field is required"
}

The CommonsModule will look as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
import { scopeLoader } from '../../../../scoped-translations';

@NgModule({
  imports: [CommonModule, TranslocoModule],
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useValue: {
        scope: 'common',
        loader: scopeLoader((lang, root) => import(`./${root}/${lang}.json`))
      }
    }
  ]
})
export class CommonsModule {}

Now, I will import this module in any lib and app.

Example Library import in TranslocoLibBModule:

import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { scopeLoader } from '../../../../scoped-translations';
import { LocationBComponent } from './location-b.component';
import { CommonsModule } from '@transloco-with-libs/common';

@NgModule({
  imports: [
    CommonModule, 

    // newly added
    CommonsModule],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useValue: {
        scope: 'compB',
        loader: scopeLoader((lang, root) => import(`./${root}/${lang}.json`))
      }
    }
  ],
  declarations: [LocationBComponent],
  exports: [LocationBComponent]
})
export class TranslocoLibBModule {}

And the component:

@Component({
  selector: 'transloco-with-libs-b',
  template: `
    <ng-container *transloco="let t">
      <p>where am I? {{ t('compB.gpsb') }}</p>
    </ng-container>

    <!-- newly added -->
    <p>Inside lib-b: {{ 'common.validations.required' | transloco }}</p>
    <ng-container *transloco="let t">
      <p>Inside lib-b: {{ t('common.validations.required') }}</p>
    </ng-container>
  `
})
export class LocationBComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

The same thing in the app:

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    // newly added
    CommonsModule,
    TranslocoLibBModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: {
        reRenderOnLangChange: true,
        availableLangs,
        defaultLang: 'en',
        prodMode: environment.production
      } as TranslocoConfig
    },
    translocoLoader
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.html

<section>
  <h1>This should tell me where I am</h1>
  <button (click)="change('en')">English</button>
  <button (click)="change('es')">Spanish</button>

  <ng-container *transloco="let t">
    <p>Root: {{ t('gps') }}</p>
  </ng-container>

  <!-- newly added-->
  <p>Inside app: {{ 'common.validations.required' | transloco }}</p>
  <ng-container *transloco="let t">
    <p>Inside app: {{ t('common.validations.required') }}</p>
  </ng-container>

  <div style="display: flex; flex-direction: column">
    <transloco-with-libs-b></transloco-with-libs-b>
  </div>

  <router-outlet></router-outlet>
</section>

Run and verify it: ng serve

Environment

Angular version: 8.2.9 (minimal reproduction from the cloned repo)

Its still an issue in our project with Angular version 10.0.0 and with Transloco version ^2.19.1.

Browser:
- [x ] Chrome (desktop) version 86.0.4240.183
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v12.18.0  
- Platform:  Mac 

Others:

[JohanHeyvaert]

Would it be possible to make it more easy to achieve this (i.e. having translations in the module’s (or component’s) folder itself)? It’s a bit cumbersome having to configure the provider in each component (or module). The code is always the same so it’s not DRY. Ideally this should be configured just once, on the root level and then all modules would know where to get their scoped translations.

[strikeflare]

Sorry for being late. I uploaded the reproduction here