Lägg till flera språkstöd till vinkel

I den här handledningen kommer vi att ta dig igenom processen att göra din app tillgänglig och användarvänlig för människor runt om i världen. Endast cirka 20 procent av världen talar engelska, så att ge andra språkalternativ kan förbättra din användarupplevelse och starkt öka din apps räckvidd. Vi ska ta en titt på vinkelens inbyggda internationaliseringsverktyg och visa hur du använder dem korrekt.

Om du bygger en webbplats istället för en app, var noga med att du har din verktygsplats rätt. Se våra guider till det bästa Website Builder och topp webbhotell För att få reda på mer.

Vi har skapat en mycket enkel demo-app för att visa processen. Klona det härifrån och följ sedan installationsanvisningarna.

Starta appen för att bekanta dig med den. Det visar bara och uppdaterar slumptal och värden med olika sammanhang, t.ex. Valutor, date etc. Vi täcker några av de rör och funktioner som används under handledningen.

• 17 Riktigt användbart Responsive Design Tutorials

01. Viktiga villkor för att stödja språk

Det finns två ord som ofta används utbytbart när man pratar om att översätta en app-internationalisering och lokalisering - men de betyder faktiskt lite olika saker. Internationalisering avser processen att förbereda din app för att stödja olika språk. Däremot avser lokalisering till processen att faktiskt översätta din app till dina önskade språk. I huvudsak internationalisering är något du gör en gång per app, och lokalisering sker en gång per lokal - åtminstone det är planen.

Dessa villkor kan också vara bekanta i sina förkortade versioner: I18N (där 18 är antalet bokstäver mellan den första "I" och den sista "N" av internationaliseringen) och L10n (där 10 är antalet bokstäver mellan "I" och lokaliseringen av lokaliseringen).

02. Vad är lokalisering?

Det finns över 6 000 språk som används runt om i världen idag, varav de flesta endast används av mycket små grupper av människor. Ändå även om vi bara fokuserar på de tre bästa språken - Mandarin, spanska och engelska - kommer det att finnas betydande skillnader i datumformatering, grammatisk struktur, pluralisering och nummerformatering.

Om vi ​​inkluderar det femte mest använda språket - arabiska - vi stöter på en annan skillnad. Arabiska är ett rätt till vänster (RTL) -skript vilket betyder att UI också måste speglas.

Så under lokalisering måste vi överväga grammatik, layout och formateringsskillnader, och vi måste naturligtvis också ändra själva texten. Vinkel kan hjälpa till med mycket av detta men du behöver fortfarande manuellt översätta texten (och spara översättningen i molnlagring , så det är säkert och delbart med ditt lag).

03. Loor i vinkel

Vi måste lokaliseras för varje språk vi behöver stödja. Ett lokalt avser den allmänna uppsättningen av preferenser för ovan nämnda överväganden som tenderar att delas i en region i världen, vanligtvis ett land. Varje plats är representerad av en Unicode Locale-identifierare, som anger språkkoden och ortförlängningen.

Vinkelens standardlokal är "EN-Us", som är språkkoden "EN" (engelska) som talas i regionen "USA" (Amerikas förenta stater). En app som är lokaliserad för "EN-US" kommer att vara subtilt annorlunda än en app lokaliserad för "EN-GB" som är engelska som talas i Storbritannien. Till exempel, i de amerikanska datumen är (bafflingly) formaterad mm / dd / åååå, medan i Storbritannien använder vi den mer förnuftiga DD / MM / YYYY-tillvägagångssättet. Denna mindre skillnad kan leda till ett stort fel i förståelsen.

För att göra saker intressanta Låt oss lokalisera vår demo-app för arabiska som talat i Irak, aka "AR-IQ" och engelska som talat i Storbritannien, aka "EN-GB". Vi använder engelska som standard den här gången.

04. Bygg konfiguration

Vårt demo-projekt skapades med hjälp av vinklade cli, vilket inkluderar några användbara verktyg. Vi ska använda den aktuella (AOT) kompilatorn för det här projektet så vi måste göra några ändringar i CLI: s konfigurationsfil: "Angular.json". Om du vill använda just-in-time (JIT) måste du konfigurera saker något annorlunda.

Med en AOT Build får du en liten, snabbare återgivning färdig-to-go-applikation som laddas utan att det behövs asynkrona önskemål att hämta saker som mallar och stylesheets. Som ett resultat måste du skapa en byggnad för varje lokal och servera lämplig byggnad med hjälp av webbadressen eller någon form av språkdetektering av serversidan. Det enklaste tillvägagångssättet är att skapa en katalog för varje lokal, t.ex. www.example.com/en-gb och www.example.com/ar-iq. Trade är att du inte kan byta språk på flygningen, men i verkligheten är det osannolikt att det är något som krävs av riktiga användare.

Först och främst måste vi lägga till en byggkonfiguration för vårt arabiska land. I JSON-filen leta efter "arkitekt.build.configurations" -objektet. Lägg till följande block för att definiera en konfiguration för lokalbefolkningen:

 "AR-IQ": {
    "basehref": "/ ar-iq /",
    "Distribuera": "/ AR-IQ /",
    "OutputPath": "DIST / Angular-I18N-DEMO /
AR-IQ ",
    "I18NFILE": "SRC / LOCALE / MESSEMEDES.AR-IQ.
XLF ",
    "I18NFORMAT": "XLF",
    "I18Nlocale": "AR-IQ" 

Denna konfiguration berättar vinkel där du kan mata ut den sammanställda byggnaden och vilken översättningsfil och format som ska användas. Det sätter också platsen och berättar vinkel vilken katalog appen kommer att distribueras till.

Vi måste också ändra standardalternativen i "arkitekt.build.options" för att använda "EN-GB" -lokalen. Ställ in följande egenskaper som visas. Obs! Vi aktiverar AOT här över brädet så det kommer att användas för produktion och utveckling bygger:

 "OUTPUTPATH": "DIST / Angular-I18N-DEMO /
EN-GB ",
  "I18Nlocale": "EN-GB",
  "Distribuera": "/ EN-GB /",
  "basehref": "/ en-gb /",
  "Aot": sant 

Vinkelstöd ett antal platser. Se till att du använder rätt värde för egenskapen "I18nLocale". Du kan se hela listan här .

Bakom kulisserna laddas ovanstående konfigurationer helt enkelt och läser från en av dessa lokala preferensfiler.

05. Servera konfiguration

Förutom att konfigurera byggproduktionen måste vi också konfigurera konfigurationen för kommandot "NG Server" för utveckling. Det här är enklare som vi helt enkelt kan referera till den byggkonfiguration som vi bara har lagt till. I "angular.json" lägg till följande block till "arkitekt.serve.configurations":

 "AR-IQ": {
    "BrowserTarget": "Angular-i18n-
Demo: Bygg: AR-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

Här hänvisar vi till de byggkonfigurationsalternativ som använder "BrowserTarget" -egenskapen, och vi sätter också "servepath". Innan vi antingen kan tjäna eller bygga den arabiska appen måste vi skapa den översättningsfil som refereras i egenskapen "I18nfile" ovan. Angular CLI innehåller ett verktyg för att extrahera flaggad text i en branschstandard översättningskällfil.

Vi kommer att täcka dessa filer mer detaljerat senare i handledningen men för nu behöver vi bara exportera den grundläggande, tom filen så att vi kan kompilera.

Vi använder kommandot "ng xi18n" med följande alternativ. Det här är den enda gången vi ska inkludera locale-id i "--out-filen" -filnamn:

 $ ng xi18n --output-path locale --out-fil
meddelanden.ar-iq.xlf --i18n-locale ar-iq 

Detta ska skapa en fil i en SRC / Locale-katalog. Från och med nu kommer vi alltid att mata upp filen med namnet "messes.xlf" och manuellt kopiera den över versionen med locale-id i namnet. Anledningen till detta är att förhindra att extraktionsverktyget överskriver några befintliga översättningar som vi har lagt till i filen.

06. SWITCH CONFIGURATION

Vid denna tidpunkt kan vi nu kompilera projektet och se vad som händer, men vi måste berätta för "NG Server" -kommandot som konfigurerar att använda. Först låt oss ta en titt på den engelska versionen. Inga ändringar här eftersom engelska är standard:

 $ ng tjäna 

Som du kan se ser det ut som den ursprungliga versionen, som använder vinkelens standardlokal av "en-oss". Den anmärkningsvärda skillnaden är valutan anger nu US $ istället för bara $. Okej, låt oss nu prova den arabiska versionen. Stoppa den engelska versionen och kör:

 $ ng Serve --Configuration = AR-IQ 

Som du förväntar dig finns det mer uppenbara skillnader i den här versionen, särskilt datumet är nu skrivet på arabiska. Vinkel kan göra detta eftersom namnen på vissa saker, som månader och dagar, är från en uppsättningslista och i slutändan relaterar de till ett känt nummer. Allt annat är dock fortfarande på engelska.

07. Locale-aware pipes

Ta en närmare titt på källkoden för 'app.component.html' och du får se att vi använder ett antal olika rör. Följande vinkelrör är lokalmedvetna, vilket innebär att de anpassar sin produktion baserat på den aktuella lokalbefolkningen: "Datspipe", "CURPRENCYPE", "decimalpipe" och "Perpipe".

Om du använder dessa rör försiktigt kommer vinkeln att hantera mycket av lokaliseringsbladet för dig. Genom försiktigt menar vi använda de tillgängliga fördefinierade alternativen där du än befinner dig. Ett bra exempel är US VS UK datumformatering vi nämnde tidigare. Om du är i Storbritannien och du vill visa ett datum med det (förnuftiga) dagmånadårsformatet, kan du vara frustrerad för att finna att det fördefinierade "shortdate" -alternativet gör som m / d / yy (t.ex. . 10/9/18) och frestas att hardcode ditt önskade format så här:

 {{mydate | Datum: 'dd / mm / y'}} 

Men vi vet nu att vi får M / D / YY-formatet eftersom vinkelan använder "EN-US" -lokalen som standard. Så istället för att fånga formatet bör vi använda alternativet "shortdate" och lokalisera vår app för att använda 'EN-GB'.

 {{mydate | Datum: "shortdate"}} 

Det tar en liten bit mer ansträngning, men då kan vi lägga till oss i vårt hjärta innehåll och alltid ha ett användarvänligt datumformat.

08. Övergripande de fördefinierade alternativen

Tyvärr verkar det inte att det finns ett enkelt, inbyggt sätt att åsidosätta ett fördefinierat format. Till exempel kan du inte bara bestämma att du föredrar "shortdate" -formatet att vara dd / mm / yyyy istället för dd / mm / y eftersom det inte finns något sätt att ändra formatet vid körning. Du kan också inte lägga till dina egna fördefinierade alternativ.

För dessa kantfall kan du skapa ett anpassat datumrör som wraps den vinklade "datspipe" och hanterar alla anpassade format per-locale. Allt det inte känner igen skulle vidarebefordras till den inbyggda "Datspipe".

09. CURPERCYPPIPE

Av hyllan kommer "Currencypipe" att formatera ett nummer som amerikanska dollar, trimma till två decimaler och lägga till grupperingar enligt definitionen i lokalens preferenser.

Du märker att i båda våra lokaler är valutan alltid i amerikanska dollar. Det växlar inte magiskt till Sterling (GBP) när du använder "EN-GB" -lokalen. Anledningen till detta är att £ 10 inte är detsamma som $ 10, så du måste uttryckligen ange den valuta som ditt nummer hänvisar till.

Låt oss uppdatera "app.component.html" för att använda GBP hela. När du anger valutakoden måste du använda rätt värde från ISO 4217-standarden (lista tillgänglig online).

Ändra de två valutapilerna genom att lägga till ":" GBP ", så:

 {{värde $ | Async | Valuta: 'GBP'}} 

Och du börjar se £ symbolen istället för US $.

Kom ihåg att det inte gör något som är klokt som automatiskt konvertera USD till motsvarande värde i GBP om du ändrar valutan - det ändrar bara den symbol som den använder.

10. Översättnings arbetsflöde

Okej, så vi har våra två lokaler konfigurerade och vinkel är hjälpsamt att göra några av arbetet för oss ut ur lådan, men texten är allt fortfarande på engelska. Vinkel kan inte översätta detta automatiskt, tyvärr, men det kan hjälpa oss med delar av arbetsflödet. Detta måste hända:

• Flagga statisk text i alla komponenter för översättning
• Exportera översättningsfil som innehåller den här statiska texten
• Ändra översättningsfilen och lägg till relevanta översättningar
• Slå samman översatt översättningsfil tillbaka till app

Vinkel hjälper oss med steg 2 och 4, men som utvecklare behöver vi göra steg 1 manuellt. Steg 3 skulle typiskt slutföras av en översättningsprofessionell eller byrå, med speciell programvara för att läsa och uppdatera översättningsfilen.

11. Axis Detaljer

För att uppnå detta måste vi lägga till ett speciellt attribut till varje element som innehåller fast text som ska översättas. För att vara tydlig om innehållet kommer från en API så är det inte fast text och du måste lokalisera det i API. Du behöver bara lägga till attributet när texten skrivs direkt i HTML-mallen i källkoden. En viktig punkt här är att du bör försöka hålla dina typercriptfiler i lokale-agnostic - med andra ord, undvik att lägga en text som behöver översättas i komponentlogiken och hålla allt i mallarna. Annars kommer extraktionsverktyget inte att kunna extrahera det. Det är bra att skilja dina bekymmer - i livet och i kod.

Låt oss öppna upp "app.component.html" och börja med titeln "Aktuell värde". Lägg bara till "I18N" -attributet till det element som direkt innehåller texten.

 & lt; div klass = "meta__title" i18n & gt;
     Nuvarande värde
   & lt; / div & gt; 

Det är viktigt att förstå att det här bara är ett "dumt" anpassat attribut. Det är inte ett vinkeldirektiv som utlöser någonting vid runtime, i själva verket avlägsnar kompilatorn det efter översättning.

Hur som helst, låt oss se vad som händer när vi kör extraktionsverktyget igen för att regenerera översättningsfilen. Kom ihåg "--out-file" är bara "meddelanden.xlf" nu:

 $ ng xi18n --output-path locale --out-fil
Meddelanden.xlf --i18n-Locale AR-IQ 

Öppna Up Output XLF-filen och du ska se ett nytt översättningsenhetsblock som ser ut så här med några ytterligare kontextinformation:

 & lt; trans-enhet ID = "FACE3D45C0F0CD38B726E7798DA15
3E2F8D55551 "Datatyp =" HTML "& GT;
    & lt; källa & gt;
      Nuvarande värde
    & lt; / källa & gt; 

Bra, det betyder att verktyget plockade upp "I18n" -attributet. Det långa id genereras av verktyget och kommer att vara detsamma om inte texten ändras. Om du har flera instanser av exakt samma text får de alla samma ID. Redigera inte detta ID!

Om du föredrar kan du ange ett anpassat ID inom "I18N" -attributet. Om du gör det kommer id att förbli detsamma även om texten ändras, så du måste vara säker på att du inte har några ID-kollisioner i hela din app. Använd "@@" prefixet för att ställa in ett anpassat ID. Här kommer id att bli "titel":

 & lt; div klass = "meta__title" i18n = "@@ titel" & gt;
     Nuvarande värde
   & lt; / div & gt; 

12. Lägg till lite sammanhang

För att säkerställa att översättaren kan ge en exakt översättning behöver de ofta veta det sammanhang som texten används i. "I18N" -attributet tillåter oss att definiera en beskrivning och en mening som hjälper översättaren. Formatet är som följer:

 & lt; div i18n = "mening | Beskrivning @@
custid "& GT; Text & LT; / Div & GT; 

Låt oss uppdatera vår titel med en mening och beskrivning:

 & lt; div klass = "meta__title" i18n = "kort
Titel | Värde vid detta ögonblick i tid @@ titel "& gt;
     Nuvarande värde
   & lt; / div & gt; 

Det borde ge översättaren tillräckligt med sammanhang för att ge en korrekt översättning. Regenerera översättningsfilen och du bör se att dessa värden har matats ut. Det är värt att notera att om du inte använder ett anpassat ID tar det genererade ID: s meningen och texten. Så samma text, men med en annan mening, kommer att få ett annat ID. Beskrivningen har emellertid ingen inverkan på ID.

13. Text med variabler

Låt oss gå vidare till Intro-sektionen. Den första stycket innehåller text och en variabel som kommer att interpoleras vid körning. Hur hanterar vi det här?

Jo lyckligtvis är det ganska enkelt. Återigen måste vi lägga till ett meningsfullt "I18N" -attribut till det innehållande elementet. Lägg till den direkt i stycket:

 & lt; p i18n = "stängningsvärde | värde när marknaden
Stängt igår @@ ClosingValue "& GT;
Kör extraktionsverktyget igen och du får se den här nya översättningsenheten:
  & lt; Trans-Unit ID = "ClosingValue"
Datatype = "HTML" & GT;
    & lt; källa & gt; igår & amp; apos; s stängningsvärde var
& lt; x id = "interpolation" equiv-text = "{{
ClosingValue | Valuta: & amp; Apos; GBP & APOS;
}} "/ & gt;. & lt; / källa & gt; 

Se hur den variabla interpoleringen har beskrivits i utgången. Det fina med detta är det tillåter översättaren att ändra den grammatiska strukturen i meningen om det behövs, utan att bryta bindningen. Till exempel kan det finnas ett språk där meningen skulle vara bäst skrivet: X-värdet var gårdagens stängning, det vill säga med variabeln i början.

14. Pluralisering

Gå vidare till nästa stycke ser du lite skrämmande syntax. Detta kallas ICU-meddelandeformat och det gör att du kan ange olika bitar av text baserat på värdet av en variabel.

Du kan använda detta för att lägga till "s" till ord på engelska när värdet är noll eller inte ett. Till exempel, om "sekunder" är en variabel som innehåller antalet sekunder kan vi använda detta ICU-pluraliseringsuttryck:

 {{sekunder}} {sekunder, plural, en
{sekund}, andra {sekunder}} 

Som kommer att matas ut:

• 0 sekunder
• 1 sekund
• 2 sekunder

Det verkar inte vara dokumenterat men du kan också använda "asyncpipe" inuti pluraliseringssyntaxen för att fungera med observerbara ämnen.

I det exemplet är "en" och "andra" pluraliseringskategorier. Det finns ett antal kategorier att välja mellan, men akta dig! Inte alla lokaler stöder alla kategorier, och vinkeln berättar inte om du försöker använda en kategori som inte stöds av den aktuella lokalbefolkningen. Det är lätt att sluta tänka att du har gjort något fel eftersom "två" kategorin inte fungerar i din "EN-GB" -lokal och istället ser du den "andra" texten. Oförklarligt "EN" (och många andra gemensamma språk) stödjer bara "en" och "andra", även om "noll" och "två" är uttryckliga värderingar.

Kolla in den här filen för att se vad som faktiskt stöds.

15. Flera radiella stapeldiagram

Vi kan arbeta runt den här begränsningen med hjälp av siffror istället för kategorier. Prefix bara värdet med en '=':

 Det {watchers, plural, = 0 {är ingen} = 1
{är en person} = 2 {är två personer}
    andra {är {{watchers}} människor}}
tittar just nu. 

Detta är redan inrättat i demo-appen, vi behöver bara lägga till "I18N" -attributet till den innehållande stycket:

 & lt; p i18n = "Watchers | Antal personer
tittar på värdet @@ watchers "& gt; 

Kör extraktionsverktyget igen för att se hur det här ser ut. Du får se att detta matas ut något annorlunda. Det kommer att skapa två översättningsenheter; en för ICU-uttrycket själv och en som interpolerar det uttrycket i den ursprungliga strängen.

16. Välj uttryck

Om du vill visa olika text beroende på värdet av en variabel kan du använda ett "Välj" ICU-uttryck som är mycket lik den "plural" -syntaxen som visas ovan. I vår demo-app övervakar vi den förändring som tillämpas på värdet och skapar en observerbar ström som kallas "trend $" som matar upp "," ned "eller" stabil "beroende på om förändringen är positiv, negativ eller noll.

Vi ansluter sedan vårt "Välj" ICU-uttryck för att mata ut en annan sträng beroende på strömmen. Här kan du se "Asyncpipe" som används:

 Värdet {Trend $ | Async, välj, uppåt
{ökat} ner {minskat} stabilt
    {ändra inte}} 

Detta är en något renare syntax än att använda 'ngif' eller 'ngswitch' för att manipulera DOM, plus det spelar också snyggt med extraktionsverktyget. Lägg till "I18N" -attributet till det innehållande elementet:

 & lt; div class = "card__info" i18n = "värde
trend | beskriver värdeförändring trend @@ trend "& gt; 

Regenerera översättningsfilen och du kommer att se tillvägagångssättet liknar pluralproduktionen, med två översättningsenheter skapade. ICU-uttryck är ganska praktiska när du vänjer dig, plus du kan boka dem för att skapa mer komplexa utgångar.

17. Lägg till översättningar

Ett mer "i18n" attribut att lägga till:

 & lt; Div Class = "Card__Info" I18N = "Transaktioner
Räkna | Antal transaktioner idag @@
Transaktioner "& GT;
     Transaktioner: {{Transactions $ | Async |
siffra }}
   & lt; / div & gt; 

Nu har vi markerat all text som behöver översätta vi kan generera översättningsfilen en sista gång. När det är skapat byt namn på det till "meddelanden.ar-iq.xlf" och ersätt den föregående inkarnationen. Det här är den fil som vi skulle skicka till översättningspersonalen, men för den här handledningen kommer Google Translate att stå i!

Öppna XLF-filen och duplicera varje "& lt; källa & gt;" element, byta namn på det '& lt; mål & gt;'. Tyvärr kan det vara ganska orubbligt så det kan hjälpa till att försköna innehållet.

För att kontrollera att vi har fått dem alla, spara filen och starta appen med den arabiska lokalbefolkningen:

 $ ng Serve --Configuration = AR-IQ 

Om du ser några meddelanden i terminalen så betyder det att du har missat en:

 Fel i XLIFF-parsefel: Meddelande * ID *
saknar en översättning ("

Förhoppningsvis har du inte några fel och du kommer att kunna se appen i webbläsaren. Vi har inte lagt till någon verklig arabisk än så det kommer inte att se mycket annorlunda ut.

18. Google Translate

Låt oss börja med något enkelt - det "aktuella värdet" -titel. Google Translate berättar att det ska vara (arabisk text här) så uppdatera värdet i "& lt, mål & gt;" element:

 & lt; källa & gt; nuvarande värde och lt; / källa & gt;
       & LT; TARGET & GT; Arabisk text här & LT; / TARGET & GT; 

Än så länge är allt bra. Låt oss nu göra en med interpolering. Här är "Gårdagens stängningsvärde var ..." (Förhoppningsvis!):

 & lt; Target & GT; arabisk text här och lt; x
ID = "Interpolation" EQUIV-TEXT = "{{ClosingValue
| Valuta: & amp; Apos; GBP & APOS; }} "/> ;< ;/target> ;

Använd ett nummer när du översätter så att du kan se var interpolationen ska vara. Observera att när du ser det översatta resultatet i Google översätt kommer det att visas omvända - dvs numret i början - men när du kopierar och klistrar in den i översättningsfilen kommer den att återgå till den ursprungliga beställningen. Detta händer eftersom arabiska är ett RTL-språk så att skriptet är (nästan) helt speglat. Google Translate gör detta genom att tillägga attributet 'DIR = "RTL" till det innehållande elementet. Vi lär oss hur du gör det i nästa steg. Resten av översättningarna är tillgängliga i demo repo, "Tutorial" -gren.

19. Skriptriktning

Vi måste hantera skriptriktningen i vår app eftersom vinkeln inte kommer att göra det automatiskt för oss. Det verkar inte heller vara något sätt att upptäcka om den aktuella lokalbefolkningen är ett LTR eller RTL-språk, så vi måste ha kommit här. Det skulle vara bra om vinkeln erbjöd ett inbyggt direktiv för detta.

Öppna upp "app.component.ts". Importera "Injicera", "Locale_ID" och "värdbindning" från '' @ vinkel / kärna ''. Sätt sedan upp "värdbindningen" enligt följande. Detta kommer att lägga till ett "dir" -attribut till appkomponenten och ställa in standardspråksriktningen till "LTR":

 @Hostbinding ('attr.dir') dir = 'ltr'; 

Lägg sedan till en konstruktör och injicera "locale_id". Kom ihåg det här är inställt av vår konfiguration eftersom vi använder AOT.

 Constructor (@inject (locale_id) privat locale: sträng) {} 

Och till sist lägg till följande snippet till den befintliga "NGONINIT" -metoden. Här kontrollerar vi om "locale_id", dvs 'ar-iq', börjar med 'ar' och om det ändrar riktningen till 'rtl' istället.

 Om (this.locale.startswith ('ar')) {
     this.dir = 'rtl';
} 

Om du planerar att stödja fler lokaler så behöver du förmodligen refactor för att göra det mer skalbar, men eftersom det bara finns cirka tio RTL-språk som används idag, bör detta tillvägagångssätt inte vara för obehagligt. Starta den arabiska appen och du bör nu se att UI är speglad - £ -tecknet ska vara till höger.

20. Produktion

Det sista steget är att generera och kolla våra produktionsbyggnader. För det första måste vi dock göra en ny snabb ändring av konfigurationen "Angular.json".

I "arkitekt.build.configurations" duplicera det befintliga produktionsobjektet och byt namn på det "" produktion-ar-iq ". Kopiera och klistra in egenskaperna från den befintliga "AR-IQ" -konfigurationen till objektet, så du har både produktionsalternativen och "I18N" -alternativen.

Du behöver också uppdatera "arkitekt.serve.configurations" också. Den här tiden duplicerar det befintliga "AR-IQ" -objektet och byt namn på det "" Produktion-AR-IQ "och ändra" BrowserTarget "-värdet för att peka på din nya" produktions-ar-IQ "-konfiguration.

Nu kan du bygga och servera din produktion arabiska land med det här kommandot:

 $ ng Serve --configuration = Produktion-AR-IQ 

Okej, vi är färdiga! Vi har framgångsrikt internationaliserat vår app och lokaliserad den för "EN-GB" och "AR-IQ" -gruppen. Vinkel gör processen anmärkningsvärt enkelt för utvecklaren, i själva verket, den svåraste biten, räknar med vad översättningarna ska vara - ursäkta alla arabiska talare om något är fel!

Denna artikel publicerades ursprungligen i utgåva 281 av kreativ webbdesignmagasin webbdesigner. Köp utgåva 281 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• Hur man bygger en fullständig webbplats i vinkel
• De bästa bärbara datorerna för programmering 2019
• Hur man bygger en app