Angular + ngx-translate : Le guide complet de traduction en temps réel [2026]

Introduction

Bien que @angular/localize soit la solution officielle pour les performances, ngx-translate reste extrêmement populaire pour les applications nécessitant un changement de langue dynamique sans rechargement de la page.

Installation

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

Configuration

Dans votre app.module.ts (ou app.config.ts pour les applications standalone) :

TypeScriptCopy
1import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
2import { TranslateHttpLoader } from '@ngx-translate/http-loader';
3import { HttpClient } from '@angular/common/http';
4
5export function HttpLoaderFactory(http: HttpClient) {
6  return new TranslateHttpLoader(http);
7}
8
9@NgModule({
10  imports: [
11    TranslateModule.forRoot({
12      loader: {
13        provide: TranslateLoader,
14        useFactory: HttpLoaderFactory,
15        deps: [HttpClient]
16      }
17    })
18  ]
19})
20export class AppModule { }

Utilisation

Injectez le service TranslateService dans vos composants.

TypeScriptCopy
1export class AppComponent {
2  constructor(private translate: TranslateService) {
3    translate.setDefaultLang('en');
4    translate.use('fr');
5  }
6}

Dans votre HTML :

HTMLCopy
<h1>{{ 'HOME.TITLE' | translate }}</h1>

Gestion des fichiers JSON avec IntlPull

Vos fichiers de traduction vivent dans assets/i18n/fr.json. Pour les garder synchronisés :

TerminalCopy
npx @intlpullhq/cli pull --output src/assets/i18n

Conclusion

Si votre besoin critique est le changement de langue instantané (runtime), ngx-translate est toujours le roi en 2026. Pour la plupart des autres cas, considérez la migration vers @angular/localize.