Angular i18n: Oversættelse til flere sprog

(Last Updated On: 31. januar 2020)

[EDIT: 2020-01-31] Vejledningen her fungerer, iht min erfaring for Angular 6, 7 og 8.

Oversættelse i Angular er kompliceret ved første øjekast, men efterhånden som man dykker ned i tågen af information, viser sig en ganske fornuftig arbejdsgang der i stor udstrækning forsimpler opgaven i forhold til tidligere tiders metoder.

En af de helt store fordele er at Angular i dag kan generere sprogfiler i forskellige standardformater. Dvs. man kan sende filerne til andre, som kan åbne dem i det oversættelsesprogram de måtte bruge, oversætte og returnere dem.

Læse HELE denne vejledning inden du går igang.

Installation og brug af @ngx-translate

Start med at installere The internationalization (i18n) library for Angular på følgende vis:

Nu skal du så tilføje 2 linier i src/app/app.module.ts:

Når du så har en tekst der skal oversættes i en template, tilføjer du ganske enkelt attributten i18n:

Generering og oversættelse af sprogfiler

Opret en basis sprogfil

Når du er færdig med at redigere din app og er klar til at bygge den, skal der generes en basisfil til oversættelse:

–output-path: relativ sti under src/ til den mappe hvor sprogfilen skal placeres

–i18n-locale: det sprog du bruger i dine templates (standard/default sprog)… i dette tilfælde dansk (da)

Ovenstående kommando opretter/overskriver messages.xlf under src/i18n.

Vi kan dog simplificere kommandoen og gøre den nemmere at huske ved at føje den til package.json:

Nu kan du nøjes med:

Hvis du åbner src/i18n/messages.xlf som er en XML fil, vil du se noget a la:

Nu er det så meningen at man skal lave kopier af filen, een for hvert sprog. F.eks. messages.en.xlf, messages.sv.xlf osv… og disse filer oversættes så til de respektive sprog.

Flette nye tekster med eksisterende

Men hvad nu når man fremover videreudvikler sin webapp. Dette vil resultere i en ny basisfil, som skal kopieres til de andre sprog…. men så overskriver man jo sine eksisterende oversættelser. Her kommer xliffmerge ind i billedet. Det er et fantastisk redskab som ikke bare opretter alle dine sprogfiler for dig (du slipper for at kopiere din basisfil manuelt), og sørger for at eksisterende oversættelse blivet flettet med nye tekster.

Vi installerer den globalt, så vi også kan bruge den i andre projekter og derfor skal du gøre det som superbruger/root/admin (kært barn har mange navne):

Nu kan vi så udvide vores kommando i package.json en smule:

Her har vi føjet && xliffmerge ... til den eksisterende kommando. Det fortæller blot hvad din xliffmerge konfig hedder og hvilke sprog du ønsker at oversætte til, i dette tilfælde engelsk, svensk og norsk. Vi føjer dog også da til. Godt nok er dansk sproget i vores basisfil, men derfor skal vi stadig bruge en sprogfil, den skal bare ikke oversættes.

Opret xliffmerge.json i roden af dit projekt (samme sted som package.json) med følgende indhold:

Bemærk at stien til ng xi18n‘s output-path er relativ i forhold til src/ men at stien til xliffmerge er relativ i forhold til projektets rodmappe og her skriver vi derfor src/i18n i srcDir og genDir. Dette kan godt give anledning til forvirring første gang.

Se alle konfigurationsmulighederne til xliffmerge her: https://github.com/martinroob/ngx-i18nsupport

Så kører vi igen…

Du får nogle advarsler i output, men det er blot information…

Nu har du 5 filer i src/i18n:

  1. messages.xlf basisfilen med alle tekster fundet i din app.
  2. messages.en.xlf den engelske version.
  3. messages.nb.xlf den norske version.
  4. messages.sv.xlf den svenske version.
  5. messages.da.xlf den danske version.

Det smarte er, at alle nye eller ændrede tekster nu er markeret og dermed nemme at finde:

Bemærk attributten state. Den er enten new, translated eller final.

xliffmerge sætter state til new, og du skal så selv sørge for at ændre værdien til translated når en tekst er oversat. Næste gang du laver sprogfiler, vil du dermed kunne skelne nye og allerede oversatte tekster fra hinanden.

Se også: Tutorial for using xliffmerge with angular cli

Tjek et sprog i browseren

Hvis du nu gerne vil se din norske oversættelse, kan det sagtens lade sig gøre med ng serve. Men først laver vi lige lidt konfiguration, så det bliver nemt:

Åben ~/mitProjekt/angular.json. Du skal føje nogle nye sektioner til under:

projects -> architect -> build -> configurations
… og …
projects -> architect -> serve -> configurations

… og nu kan vi føje vores serve kommandoer til package.json:

Dvs. for at se din app’en engelsk i dit udviklingsmiljø, skal du blot:

Bygge en internationaliseret app

Normalt når man bygger en app bliver det færdige projekt placeret direkte i ~/mitProjekt/dist. Men når du har en app med flere sprog,  bygges een app hvor hver sprog og derfor konfigurerede vi bygge-processen til at placere hvert sprog i sin egen mappe: dist/[sprog] f.eks. dist/da/, dist/en/ osv… (se angular.json).

Brugere af den danske version benytter så https://mitdomæne.dk/da/ og bruger af den engelske på https://mitdomæne.dk/en/ osv…

Du kan også bygge app’en så alle sprog er inkluderet, men hvis dine sprogfiler er omfattende betyder det at app’en fylder en del mere og det kan også have indflydelse på app’ens ydeevne. Dette er derfor ikke omfattet af denne vejledning.

Vi mangler lige at føje bygge-kommandoerne til package.json. Det er de linier herunder der starter med ng build:

Dvs. for at bygge dit dev miljø, kan du nu blot:

… du skal naturligvis også føje kommandoer til produktion i package.json. Disse konfigurationer skal naturligvis også føjes til angular.json filen.

… som så kan afvikles med:

En typisk “production” konfiguration kunne se således ud:


Bemærk at vi vha. “fileReplacements” skifter environment fil. Jeg har også valgt at oprette en særlig dist-prod mappe (se outputPath).

Vi kan også slippe for at skrive npm run build-[sprog] 4 gange:

… eller gøre det endnu kortere ved at smide ovenstående i package.json og lave en build-all kommando:


Dvs. du nu kan bygge alle 4 apps ved blot at skrive:

Nice! 🙂

Automatisk valg af sprog for brugeren

Hvis brugeren lander på https://mitdomæne.dk/ kan Apache viderestille til det sprog som er angivet i brugerens browser. Det er naturligvis ikke sikkert det er det sprog brugeren ønsker, så det skal kombineres med en mulighed for at vælge sprog, her et eksempel på en sådan konfiguration.

Hvis brugerens browser accepterer fransk og spansk (fr og es) sendes den videre til henholdsvis myapp.com/fr/ eller myapp.com/es/. I alle andre tilfælde sendes brugeren til myapp.com/en/.

Kilde: Deploying an i18n Angular app with angular-cli

Sammenfatning af arbejdsgangen

Hvis du har fulgt denne vejledning, vil din arbejdsgang fremover være som følger:

  1. Ændringer foretages
  2. npm run extract-i18n
  3. Oversæt filer og ændre state attributten fra new til translated
  4. Brug npm run serve-[sprog] i dit udviklingsmiljø for at se app’en i et bestemt sprog
  5. Brug npm run build-[sprog] eller npm run build-prod-[sprog] for at bygge app’en
  6. … forfra 🙂