Install ngx-translate in Angular - Setup Guide

Note

Still on v17? See the v17 installation guide.

@ngx-translate/core v18 requires Angular 18 or newer. For detailed information about compatibility with different Angular versions, see the Angular Compatibility documentation.

To get started with Angular translation and internationalization (i18n), you can add the ngx-translate npm modules to your project:

npm

npm i @ngx-translate/core @ngx-translate/http-loader

pnpm

pnpm add @ngx-translate/core @ngx-translate/http-loader

yarn

yarn add @ngx-translate/core @ngx-translate/http-loader

@ngx-translate/http-loader is optional. You can use it to load translation files on demand from your server.

Setup

ngx-translate works great with Angular’s modern standalone components for building multilingual applications. If you’re using NgModules, you can check out the NgModules Support documentation.

Note

For comprehensive information about using ngx-translate with NgModules, you can refer to the NgModules Support documentation.

Configuration

Initialising the TranslateService

To use ngx-translate for Angular translation in your project, you’ll need to use the provideTranslateService() function in your appConfig:

Basic Setup

app.config.ts

import {ApplicationConfig, provideZoneChangeDetection} from "@angular/core";
import {provideTranslateService} from "@ngx-translate/core";

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideTranslateService({
      fallbackLang: 'en',
      lang: 'en'
    })
  ],
};

Setup with HTTP Loader

For most applications, you’ll want to load translations from JSON files. The HTTP loader makes this easy:

app.config.ts

import {ApplicationConfig, provideZoneChangeDetection} from "@angular/core";
import {provideTranslateService} from "@ngx-translate/core";
import {provideTranslateHttpLoader} from "@ngx-translate/http-loader";
import {provideHttpClient} from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideHttpClient(),
    provideTranslateService({
      loader: provideTranslateHttpLoader({
        prefix: '/assets/i18n/',
        suffix: '.json'
      }),
      fallbackLang: 'en',
      lang: 'en'
    })
  ],
};

Caution

Important: Always Use Provider Functions Inside provideTranslateService

You should always use provider functions within the provideTranslateService configuration object:

// CORRECT USAGE
provideTranslateService({
  loader: provideTranslateLoader(CustomLoader),
  compiler: provideTranslateCompiler(CustomCompiler)
})

// INCORRECT USAGE - Will not work as expected
[
  provideTranslateService(),
  provideTranslateLoader(CustomLoader),  // This won't be used by TranslateService
  provideTranslateCompiler(CustomCompiler)  // This won't be used by TranslateService
]

This is because provideTranslateService loads default implementations for any providers not explicitly included in its configuration object. If you provide these services separately, they might not be used by the TranslateService.

Initialize the TranslateService for your application

For standalone applications, the recommended way to initialize the TranslateService is with provideAppInitializer in your appConfig. This runs once during application bootstrap, before your components are rendered, keeping side effects out of your components and avoiding any flicker of untranslated content:

app.config.ts

import {ApplicationConfig, provideAppInitializer, provideZoneChangeDetection, inject} from "@angular/core";
import {provideTranslateService, TranslateService} from "@ngx-translate/core";
import {provideTranslateHttpLoader} from "@ngx-translate/http-loader";
import {provideHttpClient} from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideHttpClient(),
    provideTranslateService({
      loader: provideTranslateHttpLoader({
        prefix: '/assets/i18n/',
        suffix: '.json'
      }),
      fallbackLang: 'en',
      lang: 'en'
    }),
    provideAppInitializer(() => {
      const translate = inject(TranslateService);
      // `lang` and `fallbackLang` from provideTranslateService() are already applied;
      // call addLangs() to register additional languages the user can switch to.
      translate.addLangs(['de', 'en']);
      translate.setDefaultLang('en');
      translate.use('en');
    })
  ],
};

Alternatively, you can access the TranslateService in a component using the modern inject() function and initialize it in the AppComponent constructor. You’ll need to import TranslatePipe and TranslateDirective into your component’s imports (v18 also ships TranslateBlockDirective for the *translateBlock structural directive — import it when you need it):

app.component.ts

import { Component, inject } from '@angular/core';
import {
    TranslateService,
    TranslatePipe,
    TranslateDirective
} from "@ngx-translate/core";

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [TranslatePipe, TranslateDirective],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    private translate = inject(TranslateService);

    constructor() {
        // `lang` and `fallbackLang` from provideTranslateService() are already applied;
        // call addLangs() to register additional languages the user can switch to.
        this.translate.addLangs(['de', 'en']);
    }
}

Now, skip the next chapter:

Loading translation files