Angular Academy · Aula

Extraindo e traduzindo mensagens

Gere e preencha arquivos de tradução.

Extraindo e traduzindo mensagens é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Do texto marcado aos arquivos de tradução

Depois que o texto é marcado com i18n, o Angular pode coletar cada mensagem em um arquivo de origem de tradução. Os tradutores preenchem cada idioma de destino, e a compilação incorpora novamente essas traduções. Esta lição aborda a extração e o formato do arquivo.

Executando ng extract-i18n

O comando da CLI ng extract-i18n procura mensagens marcadas no aplicativo e grava um arquivo de origem de tradução, por padrão messages.xlf.

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

Escolhendo o formato e o caminho de saída

Você pode escolher o formato e o destino. XLIFF (xlf) é o padrão; XLIFF 2 e arb, baseado em JSON, também são compatíveis.

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

Anatomia de um arquivo XLF

Cada mensagem marcada torna-se uma trans-unit com uma source, que contém o texto original, e uma target vazia, que o tradutor preenche.

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

Criando arquivos por localidade

Copie messages.xlf para um arquivo por localidade de destino, nomeando-o com o código da localidade, e depois traduza os destinos.

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

Preenchendo as traduções

O tradutor substitui cada target vazio pelo texto localizado, mantendo o mesmo id para que o Angular saiba a qual origem ele corresponde.

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

Os marcadores de posição devem ser preservados

As interpolações aparecem como tags de marcador de posição <x>. Os tradutores devem mantê-las, mas podem reordená-las para adequá-las à gramática do idioma de destino.

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

Extraindo novamente após alterações

Quando você adicionar ou alterar um texto marcado, execute novamente ng extract-i18n. Os IDs personalizados @@ mantêm as traduções existentes intactas; os IDs gerados automaticamente podem mudar e exigir uma nova tradução.

Configurando localidades em angular.json

Registre cada localidade e seu arquivo de tradução na configuração i18n do projeto para que a compilação saiba onde encontrá-los.

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

Lidando com traduções ausentes

Você pode definir como a compilação deve tratar mensagens não traduzidas: error interrompe a compilação, warning registra um aviso e usa o texto de origem, e ignore permanece silencioso. Use error na CI para detectar lacunas.

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

Trabalhando com ferramentas de tradução

XLIFF é um padrão do setor, portanto plataformas profissionais de tradução, além de ferramentas como Crowdin ou Lokalise, podem importar o arquivo extraído e exportar as traduções concluídas novamente no mesmo formato.

Verificação rápida

O que ng extract-i18n produz?

Recapitulação

Execute ng extract-i18n para reunir o texto marcado em um arquivo de origem XLIFF com elementos trans-unit. Copie-o para cada localidade, preencha os targets preservando os marcadores de posição, registre as localidades em angular.json e defina i18nMissingTranslation para detectar lacunas. IDs estáveis @@ protegem as traduções durante as edições.

Perguntas Frequentes

A aula “Extraindo e traduzindo mensagens” é grátis?

Sim — o texto completo de “Extraindo e traduzindo mensagens” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Extraindo e traduzindo mensagens”?

Gere e preencha arquivos de tradução. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Extraindo e traduzindo mensagens”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy