Traduza seu site Angular 19 (Webpack) usando Intlayer | Internacionalização (i18n)

Tabela de Conteúdos

Por que Intlayer em vez de alternativas?

Comparado com soluções principais como ngx-translate ou angular-l10n, Intlayer é uma solução que vem com otimizações integradas como:

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Angular

Veja o Modelo de Aplicação no GitHub.

1. 1

   Instalar Dependências

   Instale os pacotes necessários usando npm:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npm install intlayer angular-intlayernpm install @angular-builders/custom-webpack --save-devnpx intlayer init

   • intlayer

     O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, declaração de conteúdo, transpiração e comandos CLI.

   • angular-intlayer O pacote que integra o Intlayer com a aplicação Angular. Ele fornece provedores de contexto e hooks para a internacionalização Angular.

   • @angular-builders/custom-webpack Necessário para personalizar a configuração do Webpack do Angular CLI.

2. 2

   Configuração do seu projeto

   Crie um arquivo de configuração para configurar os idiomas da sua aplicação:

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Suas outras localidades
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desativar os logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.

3. 3

   Integrar o Intlayer na sua Configuração Angular

   Para integrar o Intlayer com o Angular CLI, você precisa usar um builder personalizado. Este guia assume que você está usando Webpack (padrão para muitos projetos Angular).

   Primeiro, modifique seu angular.json para usar o builder personalizado do Webpack. Atualize as configurações de build e serve:

   angular.json

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   {  "projects": {    "your-app-name": {      "architect": {        "build": {          "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",          "options": {            "customWebpackConfig": {              "path": "./webpack.config.ts",              "mergeStrategies": { "module.rules": "prepend" },            },            "main": "src/main.ts", // replace "browser": "src/main.ts",            // ...          },        },        "serve": {          "builder": "@angular-builders/custom-webpack:dev-server",        },      },    },  },}

   Certifique-se de substituir your-app-name pelo nome real do seu projeto no angular.json.

   Em seguida, crie um arquivo webpack.config.ts na raiz do seu projeto:

   webpack.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { mergeConfig } from "angular-intlayer/webpack";export default mergeConfig({});

   A função mergeConfig configura o Webpack com o Intlayer. Ela injeta o IntlayerPlugin (para lidar com arquivos de declaração de conteúdo) e configura aliases para um desempenho ideal.

4. 4

   Declarar Seu Conteúdo

   Crie e gerencie suas declarações de conteúdo para armazenar traduções:

   Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no diretório contentDir (por padrão, ./src). Em conformidade com a extensão do arquivo de declaração de conteúdo (por padrão, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Para mais detalhes, consulte a documentação de declaração de conteúdo.

5. 5

   Utilizar o Intlayer no seu Código

   Para utilizar os recursos de internacionalização do Intlayer em toda a sua aplicação Angular, você precisa fornecer o Intlayer na configuração da sua aplicação.

   src/app/app.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { ApplicationConfig } from "@angular/core";import { provideRouter } from "@angular/router";import { provideIntlayer } from "angular-intlayer";import { routes } from "./app.routes";export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    provideIntlayer(), // Adicione o provedor Intlayer aqui  ],};

   Em seguida, você pode usar a função useIntlayer dentro de qualquer componente.

   src/app/app.component.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Component } from "@angular/core";import { RouterOutlet } from "@angular/router";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  standalone: true,  imports: [RouterOutlet],  templateUrl: "./app.component.html",  styleUrl: "./app.component.css",})export class AppComponent {  content = useIntlayer("app");}

   E no seu template:

   src/app/app.component.html

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <div class="content">  <h1>{{ content().title }}</h1>  <p>{{ content().congratulations }}</p></div>

   O conteúdo do Intlayer é retornado como um Signal, então você acessa os valores chamando o sinal: content().title.

6. 6

   Alterar o idioma do seu conteúdo

   Opcional

   Para alterar o idioma do seu conteúdo, você pode usar a função setLocale fornecida pela função useLocale. Isso permite que você defina a localidade da aplicação e atualize o conteúdo adequadamente.

   Crie um componente para alternar entre idiomas:

   src/app/locale-switcher.component.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Component } from "@angular/core";import { CommonModule } from "@angular/common";import { useLocale } from "angular-intlayer";@Component({  selector: "app-locale-switcher",  standalone: true,  imports: [CommonModule],  template: `    <div class="locale-switcher">      <select        [value]="locale()"        (change)="setLocale($any($event.target).value)"      >        @for (loc of availableLocales; track loc) {          <option [value]="loc">{{ loc }}</option>        }      </select>    </div>  `,})export class LocaleSwitcherComponent {  localeCtx = useLocale();  locale = this.localeCtx.locale;  availableLocales = this.localeCtx.availableLocales;  setLocale = this.localeCtx.setLocale;}

   Em seguida, use este componente no seu app.component.ts:

   src/app/app.component.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Component } from "@angular/core";import { RouterOutlet } from "@angular/router";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "./locale-switcher.component";@Component({  selector: "app-root",  standalone: true,  imports: [RouterOutlet, LocaleSwitcherComponent],  templateUrl: "./app.component.html",  styleUrl: "./app.component.css",})export class AppComponent {  content = useIntlayer("app");}

Configurar TypeScript

O Intlayer usa aumento de módulo para obter benefícios do TypeScript e tornar sua base de código mais robusta.

Certifique-se de que sua configuração do TypeScript inclua os tipos autogerados.

{  // ... Suas configurações existentes do TypeScript  "include": [    // ... Suas configurações existentes do TypeScript    ".intlayer/**/*.ts", // Incluir os tipos gerados automaticamente  ],}

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite evitar o commit deles no seu repositório Git.

Para fazer isso, você pode adicionar as seguintes instruções ao seu arquivo .gitignore:

#  Ignorar os arquivos gerados pelo Intlayer.intlayer

Extensão do VS Code

Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a Extensão oficial Intlayer para VS Code.

Instalar no VS Code Marketplace

Esta extensão oferece:

• Autocompletar para chaves de tradução.
• Detecção de erros em tempo real para traduções ausentes.
• Prévias inline do conteúdo traduzido.
• Ações rápidas para criar e atualizar traduções facilmente.

Para mais detalhes sobre como usar a extensão, consulte a documentação da Extensão Intlayer para VS Code.

Indo Mais Longe

Para ir mais longe, você pode implementar o editor visual ou externalizar seu conteúdo usando o CMS.