Skip to documentation
ReRune
Open dashboard
DocumentationSDKs and frameworks

Angular

Use the ngx-translate or Transloco adapter with your existing loader, native configuration, and reactive translation pipes.

Documented SDK 1.6.0

Requirements: Angular 18+, RxJS 7; ngx-translate 18 or Transloco 8

Package reference
On this page

Choose your native engine

Both adapters are included in @rerune/angular. Import from the engine-specific entry point, @rerune/angular/ngx-translate or @rerune/angular/transloco. The package root does not export the setup API. Use the adapter that matches your application.

Keep a native loader

Keep your existing loader or use this bundled example. The JSON imports stand for your application locale files. A native HTTP loader still has its normal startup and offline requirements.

translations.ts · bundled loader

import { Injectable } from '@angular/core'
import { of } from 'rxjs'
import en from './locales/en/translation.json'
import de from './locales/de/translation.json'

const resources: Record<string, Record<string, string>> = { en, de }

@Injectable()
export class BundledLoader {
  getTranslation(language: string) {
    return of(resources[language] ?? {})
  }
}

Set up ngx-translate

Terminal · ngx-translate adapter

npm install @rerune/angular@1.6.0 @ngx-translate/core@18

app.config.ts · ngx-translate

import { ApplicationConfig } from '@angular/core'
import { TranslateLoader } from '@ngx-translate/core'
import { ReRune } from '@rerune/angular/ngx-translate'
import { BundledLoader } from './translations'

export const appConfig: ApplicationConfig = {
  providers: [
    ReRune.provide({
      otaPublishId: '<READ_ONLY_OTA_PUBLISH_ID>',
      supportedLocales: ['en', 'de'],
    }, {
      lang: 'en',
      fallbackLang: 'en',
      loader: { provide: TranslateLoader, useClass: BundledLoader },
    }),
  ],
}

Replace the native root provideTranslateService call with ReRune.provide. Pass the native options once and preserve any additional plugin providers in their existing order. supportedLocales provides a hint for unregistered root languages loaded lazily. Keep TranslatePipe and TranslateService in components.

Set up Transloco

Terminal · Transloco adapter

npm install @rerune/angular@1.6.0 @jsverse/transloco@8

app.config.ts · Transloco

import { ApplicationConfig } from '@angular/core'
import { ReRune } from '@rerune/angular/transloco'
import { BundledLoader } from './translations'

export const appConfig: ApplicationConfig = {
  providers: [
    ReRune.provide({
      otaPublishId: '<READ_ONLY_OTA_PUBLISH_ID>',
    }, {
      config: {
        availableLangs: ['en', 'de'],
        defaultLang: 'en',
        fallbackLang: 'en',
        reRenderOnLangChange: true,
      },
      loader: BundledLoader,
    }),
  ],
}

Replace the root provideTransloco call with ReRune.provide. Keep availableLangs, your loader, and the normal Transloco configuration. Existing transloco pipes and service calls remain in place. Register one setup style once at the root.

SSR and version-specific references

Keep the native SSR and TransferState configuration. Follow the package preload and hydration instructions when translations must be present in server-rendered HTML. Deferred hydration requires hydrationReady; a browser update alone does not localize server metadata.

For an already registered root engine, use the attachment setup documented by the adapter and omit the native-options argument. Do not register a second native root provider alongside the combined provider.