Angular Academy · Lektion

Bygga lokaliserade paket

Skapa applikationsbyggen per lokal.

Lektion 4 av 413 steg

Bygga lokaliserade paket är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Ett bygge per lokal

Angulars i18n sker vid kompilering: det skapar ett separat, fullständigt optimerat bundle för varje lokal med översättningarna inbyggda. Användarna laddar bara ner sitt språk, utan någon kostnad för översättning vid körning.

Konfigurera lokaliserade byggen

När lokalerna har deklarerats i angular.json anger Ni localize: true i byggalternativen för att generera alla lokaler samtidigt.

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

Bygga alla lokaler

Kör produktionsbygget. CLI:t skapar en mapp per lokal, där varje mapp innehåller en komplett app.

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

Bygga en enda lokal

För snabbare iteration kan Ni bygga endast en lokal genom att skicka med dess kod.

ng build --localize=fr

Ange base href per lokal

Varje lokaliserat bygge kan få ett eget baseHref så att det kan serveras från en undersökväg som /fr/. Konfigurera detta för varje lokal i angular.json.

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

Visa en specifik lokal under utveckling

ng serve visar en lokal i taget. Ange den konfiguration eller lokal vars översättningar Ni vill förhandsgranska under utvecklingen.

ng serve --configuration=fr

Dirigera användare till rätt lokal

Eftersom varje lokal är en separat mapp som kan distribueras använder Ni vanligtvis servern eller ett CDN för att omdirigera användare till rätt undersökväg baserat på deras Accept-Language-header eller en språkväxlare.

Runtime-$localize för anpassade konfigurationer

Avancerade konfigurationer kan läsa in översättningar vid körning med loadTranslations() från @angular/localize före bootstrap. Då ersätts bygget per lokal med ett enda bundle plus en hämtad översättningskarta.

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

Krav på polyfill

Om Ni använder $localize krävs polyfill-paketet @angular/localize. Lägg till det en gång med CLI:t; det registrerar det globala objekt som behövs för översättning av tagged templates.

ng add @angular/localize

Paketstorleken förblir liten

Eftersom översättningen sker vid byggtillfället innehåller det franska paketet endast fransk text, utan andra språk och utan någon översättningsmotor som skickas till webbläsaren. Därför håller i18n vid kompilering apparna slimmade.

Distribuera resultatet

Distribuera hela katalogen dist/app; varje lokaliseringsundermapp är en fristående app. Konfigurera värden så att /fr/ visar den franska versionen och att standardspråket visas i roten eller på sin egen sökväg.

Snabb kontroll

Hur levererar Angular översättningar?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ange localize: true och kör ng build --localize för att skapa en mapp per lokal, där varje mapp innehåller en komplett app. Använd baseHref per lokal (t.ex. /fr/), visa en enda lokal i utvecklingsmiljö med --configuration, lägg till polyfill-paketet @angular/localize och läs vid behov in översättningar under körning för anpassade konfigurationer.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygga lokaliserade paket” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Bygga lokaliserade paket”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygga lokaliserade paket”?

Skapa applikationsbyggen per lokal. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Bygga lokaliserade paket”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy