Ionic Framework [2|3]: Internacionalizando seu App com ngx-translate

Publicado em 19 de julho de 2018

Inserir mensagens e labels diretamente no seu código-fonte não é uma boa prática quando há possibilidade de internacionalizar o seu app. A melhor prática é manter os arquivos de tradução separados para cada linguagem, afim de evitar poluir seu código-fonte. Esse post vai servir como guia para internacionalizar o seu app em Ionic [2|3] utilizando o módulo ngx-translate do angular [2|4]. As traduções são aplicadas tanto para execução no browser quanto para os dispositivos móveis. Tendo em mãos seu projeto a ser internacionalizado, instale o ngx-translate pelo npm:

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

1 2	npm install @ngx-translate/core --save npm install @ngx-translate/http-loader

Vou demonstrar como exemplo a implementação utilizando as linguagens português brasileiro (ptBR) e inglês padrão (en). Para cada linguagem teremos um arquivo JSON indicando as traduções. Para armazenar esses arquivos, vamos criar a pasta src/assets/i18n . O nome da pasta é predefinido e você não pode customizar. Nessa nova pasta, criamos os dois arquivos JSON:

src/assets/i18n/en.json
src/assets/i18n/ptBR.json

1 2	src/assets/i18n/en.json src/assets/i18n/ptBR.json

Ionic 2 Internationalization Folder Structure

Estrutura do diretório para internacionalização

O nosso arquivo en.json fica da seguinte forma para o exemplo:

{
    "PAGE_TITLE" : "Translation tutorial", 
    "BUTTONS" : {
        "btn_en" : "English",
        "btn_ptBR" : "Portuguese (BR)"
    },
    "IN_APP" : "Internal app translation",
    "FOO": "Foo {{test}}"
}

{

"PAGE_TITLE" : "Translation tutorial",

"BUTTONS" : {

"btn_en" : "English",

"btn_ptBR" : "Portuguese (BR)"

"IN_APP" : "Internal app translation",

"FOO": "Foo {{test}}"

}

Nosso arquivo ptBR.json deve conter as mesmas chaves, mas com valores traduzidos:

{
    "PAGE_TITLE" : "Tutorial de tradução",  
    "BUTTONS" : {
        "btn_en" : "Inglês",
        "btn_ptBR" : "Português (BR)"
    },
    "IN_APP" : "Tradução dentro do app",
    "FOO": "Foo {{test}}"
}

{

"PAGE_TITLE" : "Tutorial de tradução",

"BUTTONS" : {

"btn_en" : "Inglês",

"btn_ptBR" : "Português (BR)"

"IN_APP" : "Tradução dentro do app",

"FOO": "Foo {{test}}"

}

Em seguida, precisamos importar os módulos no arquivo app.module.ts :

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

import { HttpClientModule, HttpClient } from '@angular/common/http';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

Não se esqueça de incluir também os módulos HttpClientModule e TranslateModule nos imports do NgModule:

export function HttpLoaderFactory(http: HttpClient) { 
    return new TranslateHttpLoader(http); 
}

@NgModule({
    declarations: [
        MyApp,
        HomePage
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })       
    ],
    bootstrap: [IonicApp],
        entryComponents: [
        MyApp,
        HomePage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
})

export function HttpLoaderFactory(http: HttpClient) {

return new TranslateHttpLoader(http);

}

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

HttpClientModule,

IonicModule.forRoot(MyApp),

TranslateModule.forRoot({

loader: {

provide: TranslateLoader,

useFactory: HttpLoaderFactory,

deps: [HttpClient]

}

})

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

Você também deve ter notado que a propriedade useFactory do TranslateModule requer uma factory para carregamento. Essa factory é o TranslateHttpLoader que é provido pela função HttpLoaderFactory e ele carrega as traduções do caminho /src/assets/i18n/[lang].json . Agora, vamos inicializar o ngx-translate. Primeiramente, no app.component.ts , importe o TranslateService

e faça a injeção no construtor para inicializá-lo, como abaixo:

constructor(private translateService: TranslateService) {
 
    platform.ready().then(() => {
        translateService.setDefaultLang('en');
        translateService.use('en');           
    });
}

constructor(private translateService: TranslateService) {

platform.ready().then(() => {

translateService.setDefaultLang('en');

translateService.use('en');

});

}

Nesse caso, inicializamos nossa linguagem como inglês e a definimos como padrão. Neste ponto, a biblioteca já está configurada e executando, e ambos os idiomas estão disponíveis para serem usados na sua aplicação. Abaixo, um exemplo de view que está internacionalizada, baseando-se nos valores de tradução inseridos nos arquivos JSON:

<ion-content padding>
    <h2>{{ 'IN_APP' | translate }}</h2>
    {{ 'FOO' | translate:bar }}
    <!-- Segment in content -->
    <ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
        <ion-segment-button value="en">
            {{ 'BUTTONS.btn_en' | translate }}
        </ion-segment-button>
        <ion-segment-button value="hr">
            {{ 'BUTTONS.btn_ptBR' | translate }}
        </ion-segment-button>
    </ion-segment>
</ion-content>

<ion-content padding>

<h2>{{ 'IN_APP' | translate }}</h2>

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">

<ion-segment-button value="en">

</ion-segment-button>

<ion-segment-button value="hr">

</ion-segment-button>

</ion-segment>

</ion-content>

Mas caso queira definir alguma tradução diretamente no typescript, você pode utilizar a função setTranslation :

translateService.setTranslation('en', {
    IN_APP : 'Internal app translation'
});
 
translateService.setTranslation('ptBR', {
    IN_APP : 'Tradução interna do app'
});

translateService.setTranslation('en', {

IN_APP : 'Internal app translation'

});

translateService.setTranslation('ptBR', {

IN_APP : 'Tradução interna do app'

});

Ou para recuperar alguma tradução:

this.translateService.get('your_message_key').subscribe(
    translated => {
        console.log(translated);
    }
);

this.translateService.get('your_message_key').subscribe(

translated => {

console.log(translated);

}

);

Além da boa prática de programação, é importante ter em mente também a qualidade na experiência de usuário. Então ao definir o idioma na inicialização, o recomendável é utilizar o idioma de preferência utilizado pelo usuário em seu navegador. Isso pode ser feito utilizando o módulo Globalization. Em um post futuro vou demonstrar sua utilização. Quaisquer dúvidas ou sugestões, utilize a área de comentários ou entre em contato!

Ronan Lopes

CTO na Hy Brazil Energia. Bacharel em Ciência da Computação e mestre em Otimização e Inteligência Computacional pela Universidade Federal de São João del-Rei (UFSJ). Pós-graduado em Data Science & Big Data pela PUC Minas. Praticante do budismo tibetano e facilitador pelo CEBB. Nas horas vagas rabisca alguma coisa, resolve um cubo mágico ou aprecia uma boa cerveja em companhia dos amigos.

3 Comentários

Responder

Julia

22 de novembro de 2018 at 11:40

Quanto conteudo de qualidade encontrei aqui no site. Agradeço por compartilhar. Sucesso. abraço

Responder

Sannytet

9 de dezembro de 2018 at 20:08

Make a more new posts please 🙂
___
Sanny

Responder

Sannytet

12 de dezembro de 2018 at 03:14

Nice posts! 🙂
___
Sanny

Ionic Framework [2|3]: Internacionalizando seu App com ngx-translate

Ronan Lopes

Você Também Pode Gostar

Ionic Framework [2|3]: Utilizando a Graph API do Facebook

Ionic Framework [2|3]: Melhor prática para adicionar o Font Awesome

Vídeo-chamada em Ionic 5 com peerjs

3 Comentários

Julia

Sannytet

Sannytet

Deixe uma resposta para Julia Cancelar Resposta