Internationalization (i18n)

Monorepo Boilerplate uses @ngx-translate for handling internationalization (i18n) in the Angular frontend (apps/accounts). This allows the application to support multiple languages, dynamic switching, and whitelabel-specific locales.

Configuration

The i18n setup is located in apps/accounts/src/app/app.config.ts. We use the TranslateHttpLoader to load translation files from the assets folder.

provideTranslateService({
  loader: provideTranslateHttpLoader({
    prefix: '/i18n/',
    suffix: '.json',
  }),
  fallbackLang: 'pt',
  lang: 'pt',
}),

Translation Files

Translation files are stored in apps/accounts/public/i18n/. Each file corresponds to a language code (e.g., pt.json, en.json).

Example (pt.json):

{
  "signin": {
    "title": "Entrar",
    "form": {
      "fields": {
        "email": "E-mail",
        "password": "Senha"
      }
    }
  }
}

Usage

In Templates (Pipes)

Use the translate pipe to localize text in your HTML templates.

<h1>{{ 'signin.title' | translate }}</h1>
<mat-label>{{ 'signin.form.fields.email' | translate }}</mat-label>

In Components (Service)

Inject TranslateService to use translations within your component logic.

import { TranslateService } from '@ngx-translate/core';

@Component({ ... })
export class MyComponent {
  constructor(private translate: TranslateService) {
    this.translate.get('signin.title').subscribe((res: string) => {
      console.log(res);
    });
  }
}

Whitelabeling & Organization Settings

The i18n system is integrated with our Whitelabel and Organization modules to provide a seamless experience.

Global Configuration

The global default language is defined in app.config.ts (currently pt). This serves as the fallback for unauthenticated users or when no specific preference is set.

Organization Configuration (Onboarding)

When a new Organization is created (during Onboarding), a default language can be selected. This setting persists in the organization's configuration.

1. Pre-Login: The application detects the user's browser language or uses the global default.
2. Post-Login: Once authenticated, the application checks:
   • The User's profile preference (if set).
   • The Organization's default language (whitelabel setting).
   • The Global default.

This ensures that users belonging to an organization configured for English will see the interface in English immediately after logging in, maintaining consistency with the organization's branding.