Angular Academy · Aula

Criando pacotes localizados

Produza compilações da aplicação para cada localidade.

Criando pacotes localizados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.

Uma compilação por localidade

O i18n do Angular funciona no momento da compilação: ele produz um pacote completamente otimizado e separado para cada localidade, com as traduções incorporadas. Os usuários baixam apenas o idioma deles, sem custo de tradução em tempo de execução.

Configurando compilações localizadas

Com as localidades declaradas em angular.json, defina localize: true nas opções de compilação para gerar todas as localidades de uma só vez.

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

Compilando todas as localidades

Execute a compilação de produção; a CLI emite uma pasta por localidade, cada uma contendo um aplicativo completo.

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

Compilando uma única localidade

Para iterar mais rapidamente, você pode compilar apenas uma localidade passando o código correspondente.

ng build --localize=fr

Definindo o base href por localidade

Cada compilação de localidade pode ter seu próprio baseHref, para ser disponibilizada a partir de um subcaminho como /fr/. Configure-o em cada localidade de angular.json.

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

Disponibilizando uma localidade específica no desenvolvimento

ng serve disponibiliza uma localidade por vez. Passe a configuração ou a localidade que deseja usar para visualizar as traduções durante o desenvolvimento.

ng serve --configuration=fr

Direcionando usuários para a localidade deles

Como cada localidade é uma pasta implantável separada, normalmente você usa o servidor ou uma CDN para redirecionar os usuários ao subcaminho correto com base no cabeçalho Accept-Language ou em um seletor de idioma.

$localize em tempo de execução para configurações personalizadas

Configurações avançadas podem carregar traduções em tempo de execução com loadTranslations() de @angular/localize antes da inicialização. Isso substitui a compilação por localidade por um único pacote, acompanhado de um mapa de traduções carregado separadamente.

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

Requisito de polyfill

Usar $localize requer o polyfill @angular/localize. Adicione-o uma vez com a CLI; ele registra o recurso global necessário para a tradução de modelos com tags.

ng add @angular/localize

O tamanho do pacote permanece pequeno

Como a tradução acontece no momento da compilação, o pacote em francês contém apenas texto em francês, sem outros idiomas e sem um mecanismo de tradução enviado ao navegador. É por isso que a i18n em tempo de compilação mantém os aplicativos enxutos.

Implantando a saída

Implante o diretório dist/app inteiro; cada subpasta de localidade é um aplicativo independente. Configure o seu host para que /fr/ disponibilize a compilação em francês e para que a localidade padrão seja disponibilizada na raiz ou em seu próprio caminho.

Verificação rápida

Como o Angular disponibiliza as traduções?

Recapitulação

Defina localize: true e execute ng build --localize para gerar uma pasta por localidade, cada uma contendo um aplicativo completo. Use baseHref por localidade (por exemplo, /fr/), disponibilize uma única localidade no desenvolvimento com --configuration, adicione o polyfill @angular/localize e, opcionalmente, carregue as traduções em tempo de execução para configurações personalizadas.

Perguntas Frequentes

A aula “Criando pacotes localizados” é grátis?

Sim — o texto completo de “Criando pacotes localizados” é 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 “Criando pacotes localizados”?

Produza compilações da aplicação para cada localidade. 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 4 de 4.

Quanto tempo leva a aula “Criando pacotes localizados”?

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