Svenska Sign in Get started

Angular, ngx-translate and translations in Sleekdocs

· Updated

ngx-translate can load an Angular app's language files over HTTP when the app starts. Point it at the files Sleekdocs Translate deploys, and translators can change texts without a new build of the app.

What you need

  • An Angular app on Angular 18 or later, which the current ngx-translate (version 18) requires.
  • A Sleekdocs Translate project with at least one language deployed to an environment.

Sleekdocs deploys each language to its own file on the CDN, one per environment:

https://cdn.sleekdocs.com/<project>/<environment>/<language>.json

The environment is dev, test or prod, and the language is its code, such as sv. Sleekdocs Translate shows the address of your own project when you deploy.

Install ngx-translate

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

One address per environment

Your development build should read the dev files and your production build the prod files. Angular's environment files do that. If your app doesn't have them yet, ng generate environments creates them; then set the address in each:

// src/environments/environment.ts (production)
export const environment = {
  translationsUrl: 'https://cdn.sleekdocs.com/<project>/prod/',
};

// src/environments/environment.development.ts
export const environment = {
  translationsUrl: 'https://cdn.sleekdocs.com/<project>/dev/',
};

A test build gets its own file with the test address, in the same way.

Configure the loader

In app.config.ts, give ngx-translate an HTTP loader that puts the language code between the address and .json:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideTranslateService } from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTranslateService({
      loader: provideTranslateHttpLoader({
        prefix: environment.translationsUrl,
        suffix: '.json',
      }),
      fallbackLang: 'en',
      lang: 'en',
    }),
  ],
};

With lang: 'en' the app loads en.json from the CDN at start. A key that's missing in the current language is taken from the fallback language.

Use the texts

Import TranslatePipe in a component and look up keys in its template. TranslateService.use() switches language and loads the file for it:

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

@Component({
  selector: 'app-root',
  imports: [TranslatePipe],
  template: `
    <h1>{{ 'checkout.title' | translate }}</h1>
    <button (click)="translate.use('en')">English</button>
    <button (click)="translate.use('sv')">Svenska</button>
  `,
})
export class App {
  protected translate = inject(TranslateService);
}

ngx-translate reads nested files and finds checkout.title by walking the objects. Which shape Sleekdocs deploys is a project setting; Flat or nested JSON for translation files? explains the difference.

Apps that use NgModule

Older Angular apps configure ngx-translate with TranslateModule.forRoot() in the app module instead. The loader still needs the same two things: the CDN address of the environment as the prefix, and .json as the suffix. See the ngx-translate documentation for the version you use.

New texts reach the app without a build

When a translator publishes a language and deploys it, the next start of the app reads the new file. The CDN lets browsers reuse a file for up to an hour; Deploy translations without rebuilding your app describes publishing, deploying, rolling back and that cache.

Try it

Create a team, import the JSON files your app already has, and deploy them to development. Every new team gets 14 days of Pro. Get started, or read how Sleekdocs Translate works.