Transloco does NOT work in my Angular 12 Prod Build, while it works in my DEV build. What could I be missing?

Question

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: {}
};

Answer 1

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?