Using Transloco with a configuration module, not working in prod for libs

I’m submitting a…

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

Current behavior

I created a wrapper to encapsulate Transloco configurations. For this I used the forRoot, forChild pattern.

I’m using this in an Nx workspace.

My configuration module looks like this

import { translocoLoader } from './transloco.loader';

@NgModule({
  imports: [CommonModule, TranslocoModule],
  exports: [TranslocoModule]
})
export class TranslocoConfigModule {
  static forRoot(
    prodMode: boolean,
    availableLangs: AvailableLang[] = [
      { id: 'en', label: 'English' },
      { id: 'es', label: 'Español' }
    ]
  ): ModuleWithProviders {
    return {
      ngModule: TranslocoConfigModule,
      providers: [
        {
          provide: TRANSLOCO_CONFIG,
          useValue: {
            availableLangs: availableLangs,
            defaultLang: 'en',
            prodMode: prodMode,
            reRenderOnLangChange: false, // set to true when dynamic language change is in place
            flatten: {
              aot: prodMode
            }
          } as TranslocoConfig
        },
        translocoLoader
      ]
    };
  }
  static forChild(scopeName: string, loader: any): ModuleWithProviders {
    return {
      ngModule: TranslocoConfigModule,
      providers: [
        {
          provide: TRANSLOCO_SCOPE,
          useValue: {
            scope: scopeName,
            loader
          }
        }
      ]
    };
  }
}

Then it can be used like this in an app.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslocoConfigModule.forRoot(environment.production),
    TranslocoLibBModule,
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And like this for libs.

@NgModule({
  imports: [CommonModule, TranslocoConfigModule.forChild('libB', loader)],
  declarations: [LocationBComponent],
  providers: [],
  exports: [LocationBComponent]
})
export class TranslocoLibBModule {}

If I run ng serve everything runs OK, and I can see my translation from my app and libs.

If I run ng serve --prod instead, I’m getting a 404 StatusCode for libs translations — App translation load fine.

If I configure my lib without the TranslocoConfigModule, as below, everything works again in prod.

@NgModule({
  imports: [CommonModule, TranslocoModule],
  declarations: [LocationBComponent],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useValue: {
        scope: 'libB',
        loader
      }
    }
  ],
  exports: [LocationBComponent]
})
export class TranslocoLibBModule {}

Expected behavior

I expect to be able to use my configuration wrapper in production.

Minimal reproduction of the problem with instructions

This repo contains a simple replication of the issue https://github.com/NachoVazquez/transloco-with-nx-libs

What is the motivation / use case for changing the behavior?

Extract boilerplate from my modules and reuse standard configurations.

Environment

Angular version: 8.2.11

Browser:
- [x] Chrome (desktop) version XX
- [ ] 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.10.0
- Platform:  Windows

[ArielGueta]

It seems like an AOT issue. From some reason if it’s used inside a module, you needs to export your functions:

export function en() {
  return import(`../assets/i18n/en.json`);
}

export function es() {
  return import(`../assets/i18n/es.json`);
}

@NgModule({
  imports: [CommonModule, TranslocoConfigModule.forChild('libB', { en, es })],
})

This works. I don’t think it’s related to Transloco. It’s an Angular issue.

Looking at your code, you should also pay attention that you should use a scope in lazy loaded modules or inside a component provides, as they create a separate injector. You can’t use a scope in eager modules.

[ArielGueta]

I think it works right now because this is the only scope in your app module. Try adding one more scope to your AppModule.