Angular Academy · Lezione

Creare bundle localizzati

Produrre build dell'applicazione per ogni locale

Creare bundle localizzati è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Una build per ogni lingua

Il sistema i18n di Angular opera durante la compilazione: produce un bundle completamente ottimizzato e separato per ogni lingua, con le traduzioni già incorporate. Gli utenti scaricano solo la propria lingua, senza costi di traduzione a runtime.

Configurazione delle build localizzate

Dopo aver dichiarato le lingue in angular.json, imposti localize: true nelle opzioni di build per generare tutte le lingue contemporaneamente.

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

Build per tutte le lingue

Esegua la build di produzione; la CLI genera una cartella per ogni lingua, ciascuna contenente un'app completa.

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

Build per una singola lingua

Per iterare più velocemente, può compilare una sola lingua passando il relativo codice.

ng build --localize=fr

Impostazione di base href per ogni lingua

Ogni build per lingua può avere il proprio baseHref, così l'app viene servita da un sottopercorso come /fr/. Lo configuri per ogni lingua in angular.json.

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

Avvio di una lingua specifica in sviluppo

ng serve serve una lingua alla volta. Passi la configurazione o la lingua di cui desidera visualizzare in anteprima le traduzioni durante lo sviluppo.

ng serve --configuration=fr

Instradamento degli utenti alla loro lingua

Poiché ogni lingua è una cartella separata e distribuibile, in genere si utilizza il server o una CDN per reindirizzare gli utenti al sottopercorso corretto in base all'header Accept-Language o a un selettore della lingua.

$localize a runtime per configurazioni personalizzate

Le configurazioni avanzate possono caricare le traduzioni a runtime con loadTranslations() da @angular/localize prima del bootstrap. In questo modo si rinuncia alla build per singola lingua in favore di un unico bundle più una mappa delle traduzioni recuperata separatamente.

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

Requisito del polyfill

L'utilizzo di $localize richiede il polyfill @angular/localize. Lo aggiunga una sola volta con la CLI: registrerà la variabile globale necessaria per la traduzione dei tagged template.

ng add @angular/localize

Le dimensioni del bundle restano contenute

Poiché la traduzione avviene al momento della build, il bundle francese contiene solo il testo francese: non include altre lingue né un motore di traduzione da inviare al browser. Ecco perché l'i18n a tempo di compilazione mantiene le app leggere.

Distribuzione dell'output

Distribuisca l'intera directory dist/app; ogni sottocartella locale è un'app autonoma. Configuri l'host in modo che /fr/ serva la build francese e che la locale predefinita venga servita dalla radice o dal relativo percorso.

Verifica rapida

Come distribuisce Angular le traduzioni?

Riepilogo

Imposti localize: true ed esegua ng build --localize per generare una cartella per ogni locale, ciascuna contenente un'app completa. Utilizzi un baseHref specifico per ogni locale, ad esempio /fr/, serva una sola locale in sviluppo con --configuration, aggiunga il polyfill @angular/localize e, se necessario, carichi le traduzioni a runtime per configurazioni personalizzate.

Domande Frequenti

La lezione «Creare bundle localizzati» è gratuita?

Sì — il testo completo di «Creare bundle localizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Creare bundle localizzati»?

Produrre build dell'applicazione per ogni locale Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Creare bundle localizzati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy