Angular Academy · leksjon

Bygge lokaliserte pakker

Bygg applikasjonen separat for hvert lokalmiljø.

Leksjon 4 av 413 trinn

Bygge lokaliserte pakker er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Ett bygg per språkvariant

Angulars i18n skjer ved kompilering: Det produserer en separat, fullstendig optimalisert bundle for hver språkvariant, med oversettelsene bygget inn. Brukerne laster bare ned sitt eget språk, uten kostnad for oversettelse ved kjøring.

Konfigurere lokaliserte bygg

Når språkvariantene er deklarert i angular.json, setter du localize: true i byggalternativene for å generere alle språkvariantene samtidig.

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

Bygge alle språkvarianter

Kjør produksjonsbygget. CLI-et genererer én mappe per språkvariant, og hver mappe inneholder en komplett app.

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

Bygge én språkvariant

For raskere iterasjon kan du bygge bare én språkvariant ved å angi språkkoden.

ng build --localize=fr

Angi base href per språkvariant

Hvert språkvariantbygg kan få sin egen baseHref, slik at det kan leveres fra en undermappe som /fr/. Konfigurer dette under hver språkvariant i angular.json.

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

Tjene en bestemt språkvariant i utvikling

ng serve leverer én språkvariant om gangen. Angi konfigurasjonen eller språkvarianten du vil bruke for å forhåndsvise oversettelser under utviklingen.

ng serve --configuration=fr

Rute brukere til riktig språkvariant

Fordi hver språkvariant er en separat mappe som kan distribueres, bruker du vanligvis serveren eller et CDN til å omdirigere brukere til riktig undermappe basert på Accept-Language-headeren eller en språkvelger.

Runtime $localize for tilpassede oppsett

Avanserte oppsett kan laste inn oversettelser ved kjøring med loadTranslations() fra @angular/localize før oppstart. Dette bytter ut bygg per språkvariant med én bundle samt et innhentet oversettelseskart.

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

Krav til polyfill

Bruk av $localize krever polyfill-en @angular/localize. Legg den til én gang med CLI-et; den registrerer det globale objektet som trengs for oversettelse av tagged templates.

ng add @angular/localize

Bundlestørrelsen forblir liten

Fordi oversettelsen skjer ved bygging, inneholder den franske bundlen bare fransk tekst. Ingen andre språk eller oversettelsesmotor leveres til nettleseren. Det er derfor i18n ved kompilering holder apper slanke.

Distribuere resultatet

Distribuer hele katalogen dist/app; hver lokalemappe er en selvstendig app. Konfigurer verten slik at /fr/ leverer det franske bygget, og at standardlokalet leveres fra roten eller sin egen sti.

Kort kontrollspørsmål

Hvordan leverer Angular oversettelser?

Besvar den i den interaktive leksjonen

Oppsummering

Sett localize: true og kjør ng build --localize for å generere én mappe per lokale, der hver mappe inneholder en komplett app. Bruk baseHref per lokale, for eksempel /fr/, betjen ett enkelt lokale under utvikling med --configuration, legg til polyfill-en @angular/localize, og last eventuelt inn oversettelser under kjøring for egendefinerte oppsett.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bygge lokaliserte pakker» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Bygge lokaliserte pakker», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bygge lokaliserte pakker»?

Bygg applikasjonen separat for hvert lokalmiljø. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Bygge lokaliserte pakker»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy