Transloco: BUG: Multiple libraries with i18n only loads 1 library resource bundle in SPA

[bjornharvold]

I'm submitting a...

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

Current behavior

How to replicate

• Create 2 libraries with ng-packagr: lib-1, lib-2
• Configure both libs with i18n files
• Create an application
• Make sure transloco.config.js is copying the i18n files to the spa
• In AppModule import both libraries: imports: [Lib1Module, Lib2Module]
• Run the SPA
• You will find that the application will only load up i18n files from Lib1Modules. Remove Lib1Module and will load i18n files from Lib2Module.

It doesn't matter in which order the libraries are defined in imports. Only Lib1Module gets loaded if both are defined.

If it is not immediately clear what this issue is, I will create a small project to reproduce.

Thank you,
Bjorn

[NetanelBasal]

I don't understand why this question keeps coming back. Scopes follow Angular DI rules. They only work when declared in a lazy load module, or a component's providers. They will not work in eager modules, such as a shared module.

[bjornharvold]

This issue is also occurring in lazy loaded modules.

E.g.
Lazy module 1

@NgModule({
  imports: [
    Lib1Module
  ],
  declarations: [
    CreateComponent,
    ManageComponent,
    CardComponent,
    ListComponent
  ],
  providers: [{provide: TRANSLOCO_SCOPE, useValue: 'application'}]
})

@NgModule({
  imports: [
    Lib2Module
  ],
  declarations: [
    ViewComponent,
    ApisComponent,
    ListComponent,
    CreateComponent,
    ManageComponent,
    ViewComponent,
    LandingComponent,
    CardComponent,
    ApplicationsCardComponent,
    UsersCardComponent,
    AddUserComponent
  ],
  providers: [{provide: TRANSLOCO_SCOPE, useValue: 'organization'}]
})

Here I have 2 lazy loaded modules within my SPA. Both lazy loaded modules have their own i18n file and one external library with i18n information.

All our mapped in AppModule:

{
      provide: TRANSLOCO_CONFIG,
      useValue: {
        availableLangs: [{ id: 'en', label: 'English' }],
        reRenderOnLangChange: false,
        defaultLang: 'en',
        fallbackLang: 'en',
        prodMode: environment.production,
        scopeStrategy: 'shared',
        scopeMapping: {
          application: 'APP',
          organization: 'ORG',
          'lib-1': 'COMPANY',
          'lib-2': 'ENGINE'
        }
      } as TranslocoConfig
    },

Not working. What am I doing incorrectly? Please advise.

[NetanelBasal]

Where do you see a lazy load module?

[bjornharvold]

The two modules mentioned above are both loaded lazily via the app router. Maybe best I create something on stackblitz to avoid any confusion.

[NetanelBasal]

Something doesn't make sense. You wrote this:

In AppModule import both libraries: imports: [Lib1Module, Lib2Module]

It means that you load them eagerly.

[bjornharvold]

Yes, I’ve tried both. Sorry for the confusion. Will create a stackblitz.

[bjornharvold]

Here's the Stackblitz url: https://stackblitz.com/edit/transloco-issue-180

Because of the complexity of the app, Stackblitz did not like running my default app under "projects" so I couldn't create a mono repo the way I have in my real code base. Also, I don't know how to get Stackblitz to compile my ng-packagr libs. As a result. it's not fully working on Stackblitz. However, it does show the exact setup we have in our codebase.

Let me know if that clarifies and what I've done incorrectly here. Github repo is here: https://github.com/bjornharvold/transloco-issue-180

When the app loads, you can see it loading i18n values from the main en.json, the lazy module en.json but not from lib1 and lib2 that are used by lazy modules module and module2. The http loader never loads them.

[bjornharvold]

As I am reading your words, it sounds like you are saying an external ng-packagr lib's i18n json files can ONLY be loaded if the external lib becomes a lazy loaded module. That's not what I want. I can think of many use cases with generic libraries containing some utilities and some custom form components that should never be loaded as its own lazy loaded module. The lazy loaded module is business / SPA specific. The library is generic and can be used by several lazy loaded modules in many different SPAs.

I think the new issue just created relates to this ticket as well: https://github.com/ngneat/transloco/issues/181

[NetanelBasal]

@bjornharvold I'm glad that now you understand. Unfortunately, this is how Angular works.

To get around this, we can expose a new method named loadScope which will be called in the eager module constructor, and load the scope:

@NgModule({
  imports: [
    Lib1Module,
    TranslocoModule
  ]
})
class Lib1Module {
  constructor(translocoService: TranslocoService) {
    this.translocoService.loadScope('lib').subscribe();
    // with alias
    this.translocoService.loadScope({ scope: 'lib', alias: 'myAlias'}).subscribe();
    // load multiple scopes
    this.translocoService.loadScope(['lib']).subscribe();
  }
}

Two things to note here:

1. You'll still have to use the scoped libs extractor. (unless you load it from a server)
2. The structural directive unware to this scopes, so it'll not wait for them to load before render.

[bjornharvold]

Is there a more "manual" approach to this you think where the lazy module has more control over the loading process. I can see a use case where the particular SPA importing the Lib1Module is only using some of its services and not its components so there would be no need to load its i18n resource bundle. As issue 181 points out: being able to specify which scopes to load.

[NetanelBasal]

You can pass a scope in the component's providers:

@Component({
  selector: 'todos',
  templateUrl: './todos.component.html',
  providers: [
    {provide: TRANSLOCO_SCOPE, useValue: 'todos' }
  ]
})
export class TodosComponent {
}

Or in the template:

<ng-container *transloco="let t; scope: 'todos'">
  <p>{{ t('todos.title') }}</p>
</ng-container>

[bjornharvold]

Yes correct. However, if you see the Stackblitz, I would need to pass both the lazy module's scope AND the library scope... which is what issue 181 is referring to I think.

[NetanelBasal]

181 is not related to your issue. You need to move the following line:

providers: [{provide: TRANSLOCO_SCOPE, useValue: 'lib1'}]

from the module to the Lib1Component providers.