0Pricing
Angular Academy · Lezione

Estrarre e tradurre i messaggi

Generare e compilare i file di traduzione

Estrarre e tradurre i messaggi è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Dal testo contrassegnato ai file di traduzione

Una volta contrassegnato il testo con i18n, Angular può raccogliere ogni messaggio in un file sorgente per le traduzioni. I traduttori compilano ogni lingua di destinazione e la build reinserisce le traduzioni. Questa lezione tratta l'estrazione e il formato dei file.

Esecuzione di ng extract-i18n

Il comando CLI ng extract-i18n analizza l'app alla ricerca dei messaggi contrassegnati e scrive un file sorgente per le traduzioni, per impostazione predefinita messages.xlf.

ng extract-i18n
# generates messages.xlf in the project root

Scelta del formato e del percorso di output

Può scegliere il formato e la destinazione. XLIFF (xlf) è il formato predefinito; sono supportati anche XLIFF 2 e il formato basato su JSON arb.

ng extract-i18n --format=xlf2 --output-path=src/locale

Struttura di un file XLF

Ogni messaggio contrassegnato diventa un trans-unit con un source, cioè il testo originale, e un target vuoto che il traduttore deve compilare.

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

Creazione dei file per lingua

Copi messages.xlf in un file per ogni lingua di destinazione, assegnando a ciascuno il codice della lingua, quindi traduca i target.

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

Inserimento delle traduzioni

Il traduttore sostituisce ogni target vuoto con il testo localizzato, mantenendo lo stesso id, così Angular sa a quale sorgente corrisponde.

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

È necessario preservare i segnaposto

Le interpolazioni compaiono come tag segnaposto <x>. I traduttori devono conservarle, ma possono riordinarle per adattarle alla grammatica della lingua di destinazione.

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

Nuova estrazione dopo le modifiche

Quando aggiunge o modifica testo contrassegnato, esegua di nuovo ng extract-i18n. Gli ID personalizzati @@ mantengono intatte le traduzioni esistenti; gli ID generati automaticamente possono cambiare e richiedere una nuova traduzione.

Configurazione delle lingue in angular.json

Registri ogni lingua e il relativo file di traduzione nella configurazione i18n del progetto, così la build sa dove trovarli.

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

Gestione delle traduzioni mancanti

Può indicare alla build come gestire i messaggi non tradotti: error interrompe la build, warning registra un avviso e utilizza il testo sorgente, mentre ignore non produce messaggi. Utilizzi error in CI per rilevare le parti mancanti.

"options": { "i18nMissingTranslation": "error" }

Utilizzo degli strumenti di traduzione

XLIFF è uno standard del settore, quindi le piattaforme professionali di traduzione e strumenti come Crowdin o Lokalise possono importare il file estratto ed esportare le traduzioni completate nello stesso formato.

Verifica rapida

Che cosa produce ng extract-i18n?

Riepilogo

Esegua ng extract-i18n per raccogliere il testo contrassegnato in un file sorgente XLIFF composto da trans-unit. Lo copi per ogni lingua, compili i target preservando i segnaposto, registri le lingue in angular.json e imposti i18nMissingTranslation per rilevare le parti mancanti. Gli ID stabili @@ proteggono le traduzioni dalle modifiche.

Domande Frequenti

La lezione «Estrarre e tradurre i messaggi» è gratuita?

Sì — il testo completo di «Estrarre e tradurre i messaggi» è 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 «Estrarre e tradurre i messaggi»?

Generare e compilare i file di traduzione 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 2 di 4.

Quanto tempo richiede la lezione «Estrarre e tradurre i messaggi»?

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

  1. Contrassegnare il testo da tradurre
  2. Estrarre e tradurre i messaggi
  3. Plurali e select (ICU)
  4. Creare bundle localizzati
← Torna a Angular Academy