da en en da en en sv da nb sq da da da da da da da da da fr da da da da nb hbs_lat en hbs_lat da en zh en sv fr de de fr fr fr sv en fr en en en da en fi en hbs_lat da en en es az da ar da en sv da da da da da hbs_lat en hbs_lat da da sv da en hu en sv fr de de fr fr fr ceb en en en el kn en kn da ru en ru da ar da en sv fr de de fr en da en en da en da da da da fr en fr da en hbs_lat en sv fr de de fr fr fr ceb en en en zh kn en kn da da en en en sv fr de de fr fr fr ceb ru cv ceb la en kn kn da da da ru en ru da en en sv fr de en en en en sv da nb nb da da da ar da en da da da en fr da da en da en en en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb fr de en en sv de de fr en fr it fr de fr fr fr fr fr fr fr fr en fr fr it fr en fr de fr fr ceb en it en en pl en en pt is en be uk hbs_lat en hu pms cv en lt ko uk en ko en ko cv en lt en kn lt it en is en en be de lt ko de lt en kn kn kn kn kn da en en en sv fr de de fr fr fr sv en fr en ceb en en en zh vi vi ilo en kn en kn da en en en da da da da da en en en sv fr de de fr fr fr sv en fr en ja fr de fr ceb en en en zh vi vi ilo en ko en en en kn en kn nb en en sv fr de en ru en en da en en sv fr de en ko vi en da en en en da en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb fr de en en sv en en ceb en en kn en en en hu pms cv hu en en en en en hu en hu en lt da da en en sv fr en en en da en en en da en en en en da da da de en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb fr en en es en en en en en en en en fr en es en en en en en en da da da ru da da nb da en da da sv en da da sv da nb nb en da da da da en nl da sv da en
Angular i18n: Oversættelse til flere sprog – NerdGirl
Forbud fører sjældent noget godt med sig
(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 i gang.
Installation og brug af @ngx-translate
Generering og oversættelse af sprogfiler
Flette nye tekster med eksisterende
Tjek et sprog i browseren
Automatisk valg af sprog for brugeren
Installation og brug af @ngx-translate
Start med at installere Te internationalization (i18n) library for Angular på følgende vis:
eksport class AppModule { }
Når du så har en tekst der skal oversættes i en template, tilføjer du ganske enkelt attributten i18n:
Denne er en overskrift   Og dette er et afsnit
Generering og oversættelse af sprogfiler
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:
ng xi18n --output-path i18n --i18n-locale da
–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:
{ [...] "scripts": { [...] "extract-i18n": "ng xi18n --output-path i18n --i18n-locale da" } [...] }
"extract-i18n": "ng xi18n --output-path i18n --i18n-locale da"
Nu kan du nøjes med:
$ npm run extract-i18n
$ npm run extract-i18n
Hvis du åbner src/i18n/messages.xlf som er en XML fil, vil du se noget a la:
Dette er en overskrift       Dette er et afsnit
Dette er en overskrift
Dette er et afsnit
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):
$ sudo npm install -g ngx-i18nsupport
$ sudo npm install -g ngx-i18nsupport
Nu kan vi så udvide vores kommando i package.json en smule:
{ [...] "scripts": { [...] "extract-i18n": "ng xi18n --output-path i18n --locale da && xliffmerge --profile xliffmerge.json en sv nb da" } [...] }
"extract-i18n": "ng xi18n --output-path i18n --locale da && xliffmerge --profile xliffmerge.json en sv nb da"
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:
{ "xliffmergeOptions": { "srcDir": "src/i18n", "genDir": "src/i18n", "defaultLanguage": "da", "allowIdChange": true } }
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…
$ npm run extract-i18n
$ npm run extract-i18n
Du får nogle advarsler i output, men det er blot information…
WARNING: please translate file "src/i18n/messages.en.xlf" to target-language="en" WARNING: please translate file "src/i18n/messages.sv.xlf" to target-language="sv" WARNING: please translate file "src/i18n/messages.nb.xlf" to target-language="nb" WARNING: please translate file "src/i18n/messages.da.xlf" to target-language="da"
WARNING: please translate file "src/i18n/messages.en.xlf" to target-language="en"
WARNING: please translate file "src/i18n/messages.sv.xlf" to target-language="sv"
WARNING: please translate file "src/i18n/messages.nb.xlf" to target-language="nb"
WARNING: please translate file "src/i18n/messages.da.xlf" to target-language="da"
Nu har du 5 filer i src/i18n:
messages.xlf basisfilen med alle tekster fundet i din app.
messages.en.xlf den engelske version.
messages.nb.xlf den norske version.
messages.sv.xlf den svenske version.
messages.da.xlf den danske version.
Det smarte er, at alle nye eller ændrede tekster nu er markeret og dermed nemme at finde:
Dette er en ny eller ændret tekst, der skal oversættes
Dette er en ny eller ændret tekst, der skal oversættes
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
projects -> architect -> serve -> configurations
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": {   "mitProjekt": { ... },   "architect": {     "build" : {       "builder": { ... },       "options": { ... },       "configurations": { "da": { //<- *** Herfra *** "aot":true, "outputPath":"dist/mitProjekt-da", "baseHref": "/da/", "i18nFile": "src/i18n/messages.da.xlf", "i18nLocale": "da", "i18nFormat": "xlf", "i18nMissingTranslation": "[Fejl]" }, "nb": { "aot":true, "outputPath":"dist/mitProjekt-nb", "baseHref": "/nb/", "i18nFile": "src/i18n/messages.nb.xlf", "i18nLocale": "nb", "i18nFormat": "xlf", "i18nMissingTranslation": "[Feil]" }, [... osv] //<- *** Hertil ***       } }, "serve": { "builder": "...", "options": { ... }, "configurations": { "production": { ... }, "da": { //<- *** Herfra *** "browserTarget": "mitProjekt:build:da" }, "nb": { "browserTarget": "mitProjekt:build:nb" }, [... osv] //<- *** Hertil *** } }      }   } }
"mitProjekt": { ... },
"builder": { ... },
"options": { ... },
"da": {                      //<- *** Herfra ***
[... osv]                    //<- *** Hertil ***
"options": { ... },
"production": { ... },
"da": {                      //<- *** Herfra ***
[... osv]                    //<- *** Hertil ***
… og nu kan vi føje vores serve kommandoer til package.json:
{ [...] "scripts": { [...] "extract-i18n": "ng xi18n --output-path i18n --i18n-locale da && xliffmerge --profile xliffmerge.json en sv nb", "serve-nb": "ng serve -o --configuration=nb", "serve-sv": "ng serve -o --configuration=sv", "serve-da": "ng serve -o --configuration=da", "serve-en": "ng serve -o --configuration=en", } [...] }
"extract-i18n": "ng xi18n --output-path i18n --i18n-locale da && xliffmerge --profile xliffmerge.json en sv nb",
"serve-nb": "ng serve -o --configuration=nb",
"serve-sv": "ng serve -o --configuration=sv",
"serve-da": "ng serve -o --configuration=da",
"serve-en": "ng serve -o --configuration=en",
Dvs. for at se din app’en engelsk i dit udviklingsmiljø, skal du blot:
$ npm run serve-en
$ npm run serve-en
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 linjer herunder der starter med ng build:
{ [...] "scripts": { [...] "extract-i18n": "ng xi18n --output-path i18n --i18n-locale da && xliffmerge --profile xliffmerge.json en sv nb", "serve-nb": "ng serve -o --configuration=nb", "serve-sv": "ng serve -o --configuration=sv", "serve-da": "ng serve -o --configuration=da", "serve-en": "ng serve -o --configuration=en", "build-nb": "ng build --configuration=nb", //<- *** herfra *** "build-sv": "ng build --configuration=sv", "build-da": "ng build --configuration=da", "build-en": "ng build --configuration=en" } [...] }
"extract-i18n": "ng xi18n --output-path i18n --i18n-locale da && xliffmerge --profile xliffmerge.json en sv nb",
"serve-nb": "ng serve -o --configuration=nb",
"serve-sv": "ng serve -o --configuration=sv",
"serve-da": "ng serve -o --configuration=da",
"serve-en": "ng serve -o --configuration=en",
"build-nb": "ng build --configuration=nb", //<- *** herfra ***
"build-sv": "ng build --configuration=sv",
"build-da": "ng build --configuration=da",
"build-en": "ng build --configuration=en"
Dvs. for at bygge dit dev miljø, kan du nu blot:
$ npm run build-nb $ npm run build-sv $ npm run build-da $ npm run build-en
$ npm run build-nb
$ npm run build-sv
$ npm run build-da
$ npm run build-en
… du skal naturligvis også føje kommandoer til produktion i package.json. Disse konfigurationer skal naturligvis også føjes til angular.json filen.
"build-prod-nb": "ng build --prod --configuration=production-nb", "build-prod-sv": "ng build --prod --configuration=production-sv", "build-prod-da": "ng build --prod --configuration=production-da", "build-prod-en": "ng build --prod --configuration=production-en"
"build-prod-nb": "ng build --prod --configuration=production-nb",
"build-prod-sv": "ng build --prod --configuration=production-sv",
"build-prod-da": "ng build --prod --configuration=production-da",
"build-prod-en": "ng build --prod --configuration=production-en"
… som så kan afvikles med:
$ npm run build-prod-nb
$ npm run build-prod-nb
En typisk “production” konfiguration kunne se således ud:
"production-da": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputPath":"dist-prod/da", "baseHref": "/da/", "i18nFile": "src/i18n/messages.da.xlf", "i18nLocale": "da", "i18nFormat": "xlf", "i18nMissingTranslation": "[Fejl]", "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true },
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:
$ for lang in nb sv da en; do \ npm run build-$lang; \ done
$ for lang in nb sv da en; do \
npm run build-$lang; \
… eller gøre det endnu kortere ved at smide ovenstående i package.json og lave en build-all kommando:
"build-all": "for lang in nb sv da en; do npm run build-$lang; done"
"build-all": "for lang in nb sv da en; do npm run build-$lang; done"
Dvs. du nu kan bygge alle 4 apps ved blot at skrive:
$ npm run build-all
$ npm run build-all
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/.
ServerName www.myapp.com DocumentRoot /var/www   RewriteEngine on RewriteBase / RewriteRule ^../index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (..) $1/index.html [L] RewriteCond %{HTTP:Accept-Language} ^fr [NC] RewriteRule ^$ /fr/ [R] RewriteCond %{HTTP:Accept-Language} ^es [NC] RewriteRule ^$ /es/ [R] RewriteCond %{HTTP:Accept-Language} !^es [NC] RewriteCond %{HTTP:Accept-Language} !^fr [NC] RewriteRule ^$ /en/ [R]
RewriteRule ^../index\.html$ - [L]
RewriteRule (..) $1/index.html [L]
RewriteCond %{HTTP:Accept-Language} ^fr [NC]
RewriteRule ^$ /fr/ [R]
RewriteCond %{HTTP:Accept-Language} ^es [NC]
RewriteRule ^$ /es/ [R]
RewriteCond %{HTTP:Accept-Language} !^es [NC]
RewriteCond %{HTTP:Accept-Language} !^fr [NC]
RewriteRule ^$ /en/ [R]
Kilde: Deploying an i18n Angular app with angular-cli
Hvis du har fulgt denne vejledning, vil din arbejdsgang fremover være som følger:
Oversæt filer og ændre state attributten fra new til translated
Brug npm run serve-[sprog] i dit udviklingsmiljø for at se app’en i et bestemt sprog
Brug npm run build-[sprog] eller npm run build-prod-[sprog] for at bygge app’en
Posted in Webudvikling Tagged angular 6, apache, i18n, oversættelse, sprog
I gang med Angular 6 på Linux
Angular 6 navigering: Responsive menu – en sidebar
I gang med Angular 13 på Linux
Brug af grep kommandoen
Installer Asbru Connection Manager på Fedora
Installer DBeaver på Fedora
Node Package Manager (npm)
Linux: Afvikle en kommando som en anden bruger
MariaDB: Slå generel log til midlertidigt
Udskift nouveau driver med NVIDIA på Fedora 33 – og fortryd
Skab overblik over dine DMARC rapporter
Kategorier Vælg kategori Aftensmad Akrylmaling Bagværk Computer Dessert Fotografi Generelt Grød Hakket oksekød Hobby Hvidkål Ikke kategoriseret Internet IT Krop og sind PHP Pizza Politik Samfund Server Tips & Tricks Vegansk Webudvikling
Arkiver Vælg måned august 2022 april 2022 marts 2022 oktober 2021 maj 2021 marts 2021 februar 2021 januar 2021 december 2020 november 2020 oktober 2020 august 2020 juli 2020 juni 2020 marts 2020 januar 2020 december 2019 november 2019 oktober 2019 august 2019 juni 2019 april 2019 februar 2019 december 2018 oktober 2018 september 2018 juli 2018 juni 2018 maj 2018 april 2018 februar 2018 januar 2018 december 2017 oktober 2017 september 2017 august 2017 juli 2017 juni 2017 maj 2017 april 2017 januar 2017 december 2016 november 2016 oktober 2016 september 2016 januar 2016 december 2015 november 2015 oktober 2015 september 2015
Proudly powered by WordPress | Theme: chichi by xtianmark.