Neste tutorial em português, Samuel Rizon demonstra como adicionar suporte a múltiplos idiomas a um projeto Angular 19 dentro de um workspace Nx, usando a biblioteca Transloco. Ele inicia explicando o que é o Transloco e por que é útil para internacionalização. Em seguida, mostra a instalação via npm e o comando `ng add` com o schematic do Transloco, especificando o projeto alvo e os idiomas (pt‑BR e en). Samuel detalha as alterações geradas: o arquivo `transloco.config.ts`, a inclusão do provider `provideTransloco`, a configuração do `TranslocoHttpLoader` e a criação dos arquivos JSON de tradução. Ele adapta o caminho dos arquivos de idioma para a nova pasta `public/i18n`, removendo referências à antiga `src/assets`. Depois, explica como organizar os arquivos JSON seguindo a estrutura de pastas da aplicação (ex.: `domain/AlfPagesLogin`). No template, demonstra duas formas de usar as traduções: via pipe (`{{ 'domain.alfapages.login-title' | transloco }}`) e via diretiva estrutural (`transloco`). Por fim, cria um exemplo de troca de idioma em tempo de execução usando `TranslocoService.setActiveLang` com botões para pt‑BR e en, corrigindo o código de idioma. O vídeo encerra anunciando o próximo assunto (Supabase) e referencia o vídeo anterior da série que detalha a arquitetura de pastas.
Chapters
E aí, meus amigos, tudo bem com vocês? Hoje eu vou ensinar como deixar o seu projeto Angular com suporte a múltiplos idiomas. Eu sou Samuel Rizon, por aqui eu falo sobre tecnologia, programação e carreira, e esse vídeo faz parte de uma série de vídeos que eu tô fazendo aqui no canal, que eu tô criando um SaaS do zero com Angular e Supabase e tô documentando cada processo do desenvolvimento aqui. Então, se você gosta desse tipo de conteúdo, já deixa o seu like, se inscreve aí no canal e ativa o sininho para você não perder nenhum vídeo. Bora lá? Bom, aqui eu tô com um projeto da mesma forma que tava quando a gente finalizou o vídeo anterior E a gente vai falar hoje sobre o Transloco. O que que é o Transloco? O Transloco é uma biblioteca que a gente vai conseguir trabalhar com internacionalização do Angular de uma forma muito simples, muito prática e muito fácil. Então vamos já entrar na parte de instalação. Aqui ele tem a instalação tanto no Angular CLI quanto no NX. No NX então o que que a gente vai fazer? A gente vai dar um npm install, a gente não tá usando o pnpm, a gente vai dar um npm install npm install js-vs-transloco e depois a gente vai rodar esse comando para rodar com o ng add para rodar o schematics do Transloco e adicionar as configurações necessárias. Então a gente vai colar aqui e o que que a gente tem que fazer? No Nx a gente tem que falar qual projeto que a gente quer instalar essa biblioteca. Então aqui eu dou um --project mybarbershop. Aqui ele vai me perguntar quais idiomas eu preciso, eu vou colocar pt-br em inglês e eu não tô usando server-side render. Quando eu der o OK, ele vai criar alguns arquivos aqui para mim. Vamos dar uma olhada nesses arquivos. Ele cria esse transloco.config, ele vai criar o app.config também, ele vai adicionar algumas configurações, ele vai adicionar o provideTransloco para ele dar o provider dele, os idiomas disponíveis e aqui algumas outras configurações e ele vai colocar o Transloco http-loader. Esse carinha aqui que vai rodar bem no início da aplicação e vai carregar os idiomas que a gente está utilizando. E aí ele também criou dois arquivos, um em inglês e outro em português, que é basicamente um JSON que eu vou colocar as minhas traduções aqui. Só que um detalhe, ele criou esse arquivo na pasta assets e as versões mais novas do Angular ele não tá criando mais essa pasta assets. Então ele cria a pasta public. Então a gente precisa pegar essa pasta aí, 18n, colocar aqui em public. Eu vou apagar essa pasta de assets aqui na minha configuração do Transloco config. Eu também vou alterar isso aqui para não— porque não é mais no src/assets, é uma pasta junto com src. Então vai ser barbershop/public. I18n. E também a gente tem que vir aqui no Transloq Loader e remover a pasta assets daqui. Então ele já vai carregar direto no i18n e por enquanto tá tudo certo. Como que a gente vai fazer as traduções aqui com o Transloq? Existem várias formas. O Transloq ele dá pra gente essa tradução no template, onde a gente consegue usar uma diretiva estrutural bem parecido com o ng-for ou ng-if, onde onde a gente cria variável e a gente utiliza ela dessa forma. A gente também pode utilizar pipe. Esse pipe é um dos que eu mais gosto de utilizar, que é mais fácil, é mais simples. Mas a gente pode também usar as diretivas. Então vamos fazer isso aqui no nosso projeto. Eu vou abrir a página de login, eu vou rodar o meu projeto aqui primeiro, o Next Server, mybarbershop, para ele rodar. Beleza. Então eu vou vir aqui no meu projeto, dar um F5, tá carregando. Então na minha página de login eu vou criar um H1 e vou digitar entrar para ficar mais fácil. E aqui nos meus arquivos de idioma, como é que eu costumo organizar esses meus arquivos? Eu costumo organizar eles baseado na minha estrutura de pastas. Por isso que é muito importante, no vídeo anterior eu falei sobre a minha organização de estrutura de pastas aqui, e é por isso que eu só configuro o Transloco depois de eu definir bem a minha estrutura de pastas, porque como que eu vou utilizar aqui no Transloco? Por exemplo, eu quero editar e colocar uma tradução aqui na minha página de login. Então o que que eu vou fazer? Eu vou seguir a minha estrutura de pasta, eu vou criar um domain, as chaves eu sempre coloco elas em maiúsculo, então domain AlfPagesLogin, então AlfPagesLogin. E aí aqui, o Copilot já me deu algumas coisas. Então eu tenho um título, e aí aqui que eu vou utilizar essa estrutura. Então aqui no meu arquivo HTML, em vez de colocar entrar, eu vou colocar domain alfapages/login-title transloco Eu não importei o Transloco módulo, então eu vou vir aqui e importar Transloco módulo. Importei o módulo do Transloco. Eu vou fazer essa mesma configuração aqui, só que para inglês. E aí aqui agora eu vou remover, vou colocar aqui login. Pronto. Não tenho certeza se faz a mesma configuração, está certo. Das mesmas configurações. Então aqui, quando eu vier aqui na minha página, ele já tá em "entrar" porque o idioma padrão já é português. Mas se eu vier aqui no meu web.config e mudar para inglês, ele tem que ter mudado para "login" e já mudou para "login". Pronto, de idioma a parte de configuração é essa. É muito simples, é muito prático. E como que a gente faz para mudar o idioma em tempo de execução? Então, por exemplo, eu quero que o usuário tenha a opção de selecionar qual idioma ele quer visualizar na página. Como que a gente faz isso? Aqui no login page mesmo, a gente não vai fazer aqui no login, a gente vai criar um serviço para isso, mas eu tô dando um exemplo aqui para vocês. Eu vou criar uma variável privada, TranslocoService é igual a @Inject TranslocoService, eu vou importar. E aí aqui eu vou criar um método chamado changeLink, this.translocoService setActiveLink, e aqui eu vou criar agora um botão nz-button, changeLang, pt-br. E eu vou fazer a mesma coisa para o inglês. E aqui eu vou só importar o botão, nz-button-component, e aqui ele vai importar. Beleza. Então quando eu vier aqui na minha página do meu projeto, agora eu vou ter dois botões, português e inglês. Deu erro porque O inglês não é "en-us", é só "en", então português, inglês, português, inglês. E é isso, a gente já tá com o aplicativo configurado para suportar múltiplos idiomas. Existe uma outra forma da gente utilizar essa parte aqui, que é usando diretivas. Igual eu falei que o Transloco, ele dá para gente esse suporte também. Qual que é a diferença? A diferença é que usando a diretiva a gente consegue passar aqui para ele deixa eu achar aqui, ó, o prefixo. Então eu vou vir aqui e eu vou copiar esse cara, eu vou colar ele aqui, vou pegar isso aqui que é o meu prefixo, colocar aqui, e aí eu vou só ter que mudar para mim utilizar dessa forma aqui, ó, que em vez de utilizar um pipe, eu vou utilizar esse T, type. E aí eu fecho aqui e pronto, salvei. Quando eu venho aqui para minha página novamente, eu tenho login entrar e login. E aí dessa forma a gente não precisa ficar passando toda vez em todos os textos que a gente tiver no nosso sistema, né? Eu não preciso ficar passando todo esse caminho aqui para as minhas pastas. E pronto, é dessa forma que eu configuro o suporte a múltiplos idiomas nos meus projetos Angular. E no próximo vídeo a gente vai falar sobre o Supabase. Tô bem ansioso para gravar esse vídeo e mostrar para vocês tudo que o Supabase tem para oferecer para a gente como um backend. E se você quer entender como que eu cheguei nessa estrutura de pastas e arquivos, dá uma olhada aqui nesse vídeo. Ao vídeo anterior dessa série, onde eu expliquei detalhadamente cada pasta, cada arquivo, e como que eu penso e como que eu monto toda arquitetura de uma aplicação Angular 100% escalável. Valeu, até a próxima!
