Transloco works in DEV and NOT in Prod

[tekpartner-new]

When I run my Angular 12 application locally using npm start the Transloco translations work fine.

However, after an ng build --configuration production when I run my application using http-server dist/my-project the translations don't work - I see the raw values.

Here's my transloco-root.module.ts:

import { HttpClient } from "@angular/common/http";
import {
  Translation,
  TRANSLOCO_CONFIG,
  TRANSLOCO_LOADER,
  translocoConfig,
  TranslocoLoader,
  TranslocoModule
} from "@ngneat/transloco";
import { Injectable, NgModule } from "@angular/core";
import { environment } from "../../environments/environment";

@Injectable({ providedIn: "root" })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {
  }

  getTranslation(lang: string) {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ["hin", "eng", "tel"],
        defaultLang: "eng",
        reRenderOnLangChange: true,
        prodMode: environment.production,
        fallbackLang: "hin",
        failedRetries: 1,
        missingHandler: {
          allowEmpty: true,
          useFallbackTranslation: true
        },
        flatten: {
          aot: environment.production
        }
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
  ]
})
export class TranslocoRootModule {
}

Here's my transloco.config.js:

module.exports = {
  rootTranslationsPath: 'src/assets/i18n/',
  langs: ['hin', 'eng', 'tel'],
  keysManager: {}
};

[tekpartner-new]

Odd... But this worked for me:

Removing the entry from providers makes the translation work in Prod Mode.

        flatten: {
          aot: environment.production,
        },

Any ideas why?

[ZaLiTHkA]

I've just been digging into the same thing, and I think it's partly just confusing docs.. but possibly a small bug, not sure. 🤔 just a few interesting points:

• the transloco-root.module.ts example in the Getting Started > Installation docs doesn't include the flatten key.
• then the flatten.aot section of the Getting Started > Config Options docs states, somewhat unclearly: "Check the optimization plugin"
• but, continuing down the rabbit hole, the Tools > Optimize docs explain a whole ton about optimising tralation files... including a reference to flatten.aot.

---

one thing about the "Optimize" library, it starts off by stating that @ngneat/transloco-optimize must be installed. checking with yarn why in my project, I don't have that installed, even as a transitive dependency of anything else..

so, if this setting alters something for Transloco during the Angular build process, regardless of whether of not @ngneat/transloco-optimize is installed.. could this be considered a bug...?