Dans le monde numérique en expansion d’aujourd’hui, les développeurs Web visent à se connecter avec un public mondial. Une stratégie clé pour y parvenir consiste à transformer votre application Angular en une expérience multilingue. Bienvenue dans Internationalisation (i18n), où votre application peut communiquer avec les utilisateurs dans leur langue maternelle, où qu'ils se trouvent. Dans ce blog, nous aborderons l'intégration d'i18n dans votre projet Angular, garantissant que votre application est accessible et conviviale pour les personnes du monde entier.

Introduction à l'internationalisation (i18n) en Angular

Imaginez votre application Web comme un pont reliant les utilisateurs du monde entier. Pour créer une expérience accueillante et conviviale pour tous, il est essentiel de communiquer dans leur langue. L'internationalisation (i18n) est la clé pour rendre votre application adaptable à différentes langues et régions. Angular propose des outils et des fonctionnalités robustes pour vous aider à y parvenir.

Configuration d'un nouveau projet angulaire

Avant de commencer notre voyage i18n, créons un nouveau projet Angular.

ng new i18n-app

Vous pouvez utiliser la commande suivante pour démarrer un nouveau projet Angular à l'aide de la CLI Angular. Pendant le processus de configuration, vous pouvez configurer votre projet, y compris des options telles que l'activation du routage angulaire et le choix d'un format de feuille de style (par exemple, CSS, SCSS). Assurez-vous de sélectionner les paramètres qui correspondent aux exigences de votre projet.

Installation et configuration des outils i18n d'Angular

1. Pour lancer notre aventure i18n, nous aurons besoin des bons outils. Nous installerons et configurerons les outils i18n d'Angular pour rendre notre application multilingue.

npm install @ngx-translate/core --save

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

1. Une fois ngx-translate installé, nous pouvons l'importer dans notre module Angular ou Config et configurer le service de traduction :

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 { }

Si vous utilisez le fichier app.config, remplacez simplement NgModule par le code suivant :

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],
                },
            }),
        ])
    ]
}

Dans ce code, nous importons les modules ngx-translate nécessaires et configurons le chargeur de traduction à l'aide de la fonction HttpLoaderFactory. La fonction HttpLoaderFactory utilise le module HttpClient pour charger les fichiers de traduction de manière asynchrone depuis le serveur.

Création de fichiers de traduction

Une fois le service de traduction configuré, nous pouvons créer des fichiers de traduction pour chaque langue que nous souhaitons prendre en charge. Les fichiers de traduction sont des fichiers JSON qui mappent les clés aux chaînes traduites.

Créez des fichiers avec le code de langue nécessaire comme nom et ajoutez-y des traductions.

Par exemple, voici un fichier de traduction en anglais :

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

Et voici un fichier de traduction en allemand :

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

Voici la structure des dossiers et les noms des fichiers.

Remarque : Les fichiers de traduction utilisent les mêmes clés mais avec des valeurs différentes pour chaque langue. Cela simplifie le basculement entre les langues dans notre application sans modifier le code.

Utiliser des traductions dans des modèles

Une fois nos fichiers de traduction prêts, nous pouvons désormais les intégrer dans nos modèles Angular. La première étape consiste à injecter le service de traduction dans notre composant :

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);
  }
}

Dans ce code, nous injectons le TranslateService dans notre composant et définissons l'anglais comme langue par défaut. Nous définissons également une méthode translateLanguage qui nous permet de changer la langue de l'application.

Créer un composant pour la traduction linguistique

ng g c LanguageTranslation

Après avoir créé le composant, nous pouvons utiliser le service de traduction pour traduire entre plusieurs langues.

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

Dans ce code, nous créons un LanguageTranslationComponent qui injecte le TranslateService et fournit deux boutons pour basculer entre l'anglais et l'allemand. Lorsqu'un bouton est cliqué, nous appelons la méthode translateLanguage sur TranslateService avec le code de langue approprié.

Remarque : Lorsque vous utilisez this.translate.use('DE'), assurez-vous d'utiliser le code de langue correct car il est sensible à la casse et assurez-vous que le nom du fichier est exact.

Conclusion:

L'internationalisation est un élément clé du développement logiciel moderne, et Angular propose des outils robustes pour créer des applications multilingues. Avec la bibliothèque ngx-translate, l'implémentation d'i18n dans Angular devient à la fois plus simple et plus adaptable.

Dans cet article, nous avons expliqué comment utiliser ngx-translate pour générer des fichiers de traduction, appliquer des traductions dans des modèles et changer de langue dans une application Angular. En suivant ces directives, vous pouvez créer sans effort une application multilingue accessible aux utilisateurs du monde entier.

Merci!

N'hésitez pas à laisser des commentaires si vous avez des questions