Angular Academy · Oppitunti

Lokalisointipakettien rakentaminen

Tuottakaa sovelluksesta kielialuekohtaiset koontiversiot

Oppitunti 4/413 vaihetta

Lokalisointipakettien rakentaminen on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Yksi koontiversio kielialuetta kohti

Angularin i18n toimii käännöksen aikana: se tuottaa jokaiselle kielialueelle erillisen, täysin optimoidun paketin, johon käännökset on sisällytetty. Käyttäjät lataavat vain oman kielensä, eikä käännöksistä aiheudu ajonaikaisia kustannuksia.

Lokalisoitujen koontiversioiden määrittäminen

Kun kielialueet on ilmoitettu angular.json-tiedostossa, asettakaa koontiasetuksiin localize: true, jotta kaikki kielialueet tuotetaan kerralla.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Kaikkien kielialueiden koonti

Suorittakaa tuotantokoonti; CLI tuottaa yhden kansion kielialuetta kohti, ja jokainen kansio sisältää täydellisen sovelluksen.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Yhden kielialueen koonti

Voitte nopeuttaa kehitystyötä kokoamalla vain yhden kielialueen välittämällä sen koodin.

ng build --localize=fr

base href -arvon määrittäminen kielialueittain

Kullekin kielialueen koontiversiolle voidaan määrittää oma baseHref, jolloin se voidaan tarjota alihakemistosta, kuten /fr/. Määrittäkää tämä kunkin kielialueen alle angular.json-tiedostossa.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Tietyn kielialueen tarjoaminen kehitystilassa

ng serve tarjoaa yhden kielialueen kerrallaan. Välittäkää määritys tai kielialue, jonka käännöksiä haluatte esikatsella kehityksen aikana.

ng serve --configuration=fr

Käyttäjien ohjaaminen heidän kielialueelleen

Koska kukin kielialue on erillinen käyttöönotettava kansio, käyttäjät ohjataan yleensä palvelimen tai CDN:n avulla oikeaan alihakemistoon Accept-Language-otsakkeen tai kielenvaihtajan perusteella.

Ajonaikainen $localize mukautettuja asetuksia varten

Edistyneissä ratkaisuissa käännökset voidaan ladata ajonaikaisesti @angular/localize-paketin loadTranslations()-toiminnolla ennen käynnistystä. Tällöin kielialuekohtaiset koontiversiot korvautuvat yhdellä paketilla ja ladattavalla käännöskartalla.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Polyfill-vaatimus

$localize-toiminnon käyttäminen edellyttää @angular/localize-polyfillia. Lisää se kerran CLI:n avulla; se rekisteröi tagged template -käännöksiä varten tarvittavan globaalin muuttujan.

ng add @angular/localize

Pakettikoko pysyy pienenä

Koska käännös tapahtuu koontivaiheessa, ranskankielinen paketti sisältää vain ranskankielisen tekstin. Mukana ei ole muita kieliä eikä selaimeen toimitettavaa käännösmoottoria. Siksi käännösaikainen i18n pitää sovellukset kevyinä.

Tuloksen julkaiseminen

Julkaise koko dist/app-hakemisto; jokainen kielialikansio on itsenäinen sovellus. Määritä palvelimesi niin, että /fr/ tarjoaa ranskankielisen koonnin ja oletuskieli tarjotaan juuresta tai omasta polustaan.

Pikatarkistus

Miten Angular toimittaa käännökset?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Aseta localize: true ja suorita ng build --localize, jolloin muodostetaan yksi kansio jokaista kielialuetta kohti ja jokainen kansio sisältää kokonaisen sovelluksen. Käytä kielialuekohtaisia baseHref-arvoja (esimerkiksi /fr/), tarjoa kehityksen aikana yksi kielialue komennolla --configuration, lisää @angular/localize-polyfill ja lataa halutessasi käännökset suorituksen aikana mukautettuja toteutuksia varten.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Lokalisointipakettien rakentaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Lokalisointipakettien rakentaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Lokalisointipakettien rakentaminen”?

Tuottakaa sovelluksesta kielialuekohtaiset koontiversiot Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Lokalisointipakettien rakentaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy