CODEWITHSUNDEEP
angularproduction-environmentangular12transloco
Tora Tora Tora
Tora Tora Tora

Reputation: 993

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

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

Upvotes: 0

Views: 1872

Answers (2)

Henry Ohanga
Henry Ohanga

Reputation: 416

When enabled, flatten.aot config allows translation file flatting, removing translators comments and minifying the JSON file.

Make sure to set up the Optimize Tool for your translations to work in production mode.

For Angular versions < 16, I presume you are still reading from @ngneat/transloco. Please check out the compatibility map here

Upvotes: 0

Tora Tora Tora
Tora Tora Tora

Reputation: 993

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?

Upvotes: 2

Related Questions