Nyelvesítés

Az kliensoldali alkalmazások fejlesztése során fontos szempont, hogy a felületen megjelenő szövegek, a felhasználó által kiválasztott nyelven jelenjenek meg.

Ennek legfontosabb előfeltétele, hogy a szövegezések ne a kódba legyenek beégetve, hanem egy központi helyen legyenek karbantartva.

A frontend projekten ez a shared modul assets/i18n könyvtára. Ezen a mappán belül országkódonként egy-egy JSON fájlban találhatóak a különböző nyelvekhez tartozó fordítások.

A JSON fájlok lényegében JSON struktúra szerint, kulcs - érték párok formájában tartalmazzák a fordításokat.

Központi helyen tárolt fordítások

Annak, hogy a fordításokat nyelvenként egy fájlban tároljuk nem csak az az előnye, hogy meg tudjuk valósítani a nyelvesítést, hanem az is, hogy amennyiben szükséges a szövegek módosítása, akkor nem kell a programkódban keresgélni a szövegeket, hanem elég a központi fájlban módosítani a fordítást.

1. Ugyanazon fordítások használata a különböző frontend alkalmazásokban

Az esetek többségében nem csak egy, hanem az összes frontend alkalmazásban szeretnénk használni ugyanazokat fordításokat.

Ahhoz, hogy ehhez ne kelljen 3 frontend alkalmazás esetén 3 fájlt karbantartani, az npm run build során minden frontend alkalmazás assets mappájába bemásoljuk a shared modul alatti fordításokat.

Ebből 2 dolog következik:

Ne a frontend alkalmazások assets mappájában található fájlokat szerkesszük, mert azok az npm build vagy npm start során felül lesznek írva.
Ha módosítottuk a fordításokat a shared modulban, akkor azok csak az npm run copy-assets -- --project=${frontend-projekt-név} parancs kiadása után lépnek érvényre a felületen. (A ${frontend-projekt-név} placeholder helyére a frontend alkalmazás nevét kell behelyettesíteni. Pl.: admin, client)

2. Fordítások definiálása és feloldása

A fordításokhoz az ngx-translate libet használjuk, melynek konfigurációja a shared/configs/translation.config.ts fájlban található.

Első körben vegyük fel az új szövegeket a shared/assets/i18n mappában, a megfelelő nyelvhez tartozó JSON fájlba.

Figyeljünk rá, hogy JSON szabvány szerint, struktúrálva kell a szövegeket hozzáadni:

{
  ...
  "admin": {
    "pages": {
      "activate": {
          ...
          "username": "Felhasználónév",
          ...
      }       
    }
  }
  ...
}

Végül a megfelelő helyen hivatkozzuk meg a kulcsot a ngx-translate lib translate pipe-ját használva:

<mat-form-field appearance="outline" class="wide">
    <mat-label>{{'admin.pages.activate.username' | translate }}
    </mat-label>
    <input matInput disabled [value]="activationData?.username" />
</mat-form-field>

Természetesen a ngx-translate lib TranslateService osztályát is injektálhatjuk az Angular szervizeinkbe és használhatjuk ily módon is fordításokhoz.
Pl.: SnackBar üzenetek feloldására:

        ...
        this.snackBar.openSnackBar(
          this.translate.instant(
            'admin.pages.access-management.add-new-admin.add-failed'
          ),
          'X'
        );
        ...