Angular + ngx-translate: Der komplette Guide für Echtzeit-Übersetzung [2026]

Einführung

Obwohl @angular/localize die offizielle Lösung für Performance ist, bleibt ngx-translate extrem beliebt für Apps, die einen dynamischen Sprachwechsel ohne Neuladen der Seite erfordern.

Installation

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

Konfiguration

In deinem app.module.ts (oder app.config.ts für Standalone-Apps):

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

Verwendung

Injiziere den TranslateService in deine Komponenten.

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

In deinem HTML:

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

Verwaltung von JSON-Dateien mit IntlPull

Deine Übersetzungsdateien leben in assets/i18n/de.json. Um sie synchron zu halten:

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

Fazit

Wenn dein kritischer Bedarf der sofortige (Runtime) Sprachwechsel ist, ist ngx-translate auch 2026 noch der König. Für die meisten anderen Fälle erwäge die Migration zu @angular/localize.