No mundo digital expansivo de hoje, os desenvolvedores web pretendem se conectar com um público global. Uma estratégia fundamental para conseguir isso é transformar seu aplicativo Angular em uma experiência multilíngue. Bem-vindo à Internacionalização (i18n), onde seu aplicativo pode se comunicar com os usuários em seus idiomas nativos, não importa onde eles estejam. Neste blog, nos aprofundaremos na integração do i18n em seu projeto Angular, garantindo que seu aplicativo seja acessível e fácil de usar para pessoas em todo o mundo.

Introdução à Internacionalização (i18n) em Angular

Imagine seu aplicativo da web como uma ponte conectando usuários de todo o mundo. Para criar uma experiência acolhedora e fácil de usar para todos, é essencial comunicar-se no idioma deles. A internacionalização (i18n) é a chave para tornar seu aplicativo adaptável a vários idiomas e regiões. Angular oferece ferramentas e recursos robustos para ajudá-lo a conseguir isso.

Configurando um novo projeto Angular

Antes de começarmos nossa jornada i18n, vamos criar um novo projeto Angular.

ng new i18n-app

Você pode usar o seguinte comando para iniciar um novo projeto Angular usando o Angular CLI. Durante o processo de configuração, você pode configurar seu projeto, incluindo opções como habilitar o roteamento Angular e escolher um formato de folha de estilo (por exemplo, CSS, SCSS). Certifique-se de selecionar as configurações que atendem aos requisitos do seu projeto.

Instalando e configurando as ferramentas i18n do Angular

1. Para iniciar nossa jornada i18n, precisaremos das ferramentas certas. Instalaremos e configuraremos as ferramentas i18n do Angular para tornar nosso aplicativo multilíngue.

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

1. Depois que o ngx-translate estiver instalado, podemos importá-lo para nosso módulo Angular ou Config e configurar o serviço de tradução:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Se você estiver usando o arquivo app.config, simplesmente substitua NgModule pelo seguinte código:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

Neste código, importamos os módulos ngx-translate necessários e configuramos o carregador de tradução usando a função HttpLoaderFactory. A função HttpLoaderFactory usa o módulo HttpClient para carregar arquivos de tradução de forma assíncrona do servidor.

Criando arquivos de tradução

Depois que o serviço de tradução estiver configurado, podemos criar arquivos de tradução para cada idioma que desejamos oferecer suporte. Arquivos de tradução são arquivos JSON que mapeiam chaves para strings traduzidas.

Crie arquivos com o código do idioma necessário como nome e adicione traduções a eles.

Por exemplo, aqui está um arquivo de tradução em inglês:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

E aqui está um arquivo de tradução em alemão:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

Aqui está a estrutura das pastas e os nomes dos arquivos.

Nota: Os arquivos de tradução utilizam as mesmas chaves, mas com valores diferentes para cada idioma. Isso simplifica a alternância entre idiomas em nosso aplicativo sem modificar o código.

Usando traduções em modelos

Com nossos arquivos de tradução prontos, agora podemos integrá-los em nossos modelos Angular. O primeiro passo é injetar o serviço de tradução em nosso componente:

App.component.ts :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

Neste código, injetamos o TranslateService em nosso componente e definimos o inglês como idioma padrão. Também definimos um método translateLanguage que nos permite alterar o idioma do aplicativo.

Crie um componente para tradução de idiomas

ng g c LanguageTranslation

Depois de criar o componente, podemos utilizar o Serviço de Tradução para traduzir entre vários idiomas.

LanguageTranslation.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.component.html

{{ "title" | translate }}


    English
    German

Neste código, criamos um LanguageTranslationComponent que injeta o TranslateService e fornece dois botões para alternar entre inglês e alemão. Quando um botão é clicado, chamamos o método translateLanguage no TranslateService com o código de idioma apropriado.

Nota: Ao usar this.translate.use('DE'), certifique-se de usar o código de idioma correto, pois ele diferencia maiúsculas de minúsculas e certifique-se de que o nome do arquivo seja exato.

Conclusão:

A internacionalização é um elemento-chave do desenvolvimento de software moderno, e a Angular oferece ferramentas robustas para a criação de aplicativos multilíngues. Com a biblioteca ngx-translate, implementar i18n em Angular torna-se mais simples e adaptável.

Neste artigo, abordamos como usar ngx-translate para gerar arquivos de tradução, aplicar traduções em modelos e alternar idiomas em um aplicativo Angular. Seguindo essas diretrizes, você pode criar facilmente um aplicativo multilíngue acessível a usuários em todo o mundo.

Obrigado!

Sinta-se à vontade para deixar comentários se tiver alguma dúvida