Skip to content
ReRune

Angular localization with your existing translation engine.

Add OTA translations with @rerune/angular 1.6.0 by replacing the ngx-translate or Transloco root provider. Pass its unchanged native options to ReRune and keep your loaders, pipes, and language switching.
Start localizingSee workflow
ReRune projects list showing real localization projects in a workspace
ReRune dashboard showing localization workspace activity and project statusReRune dashboard showing localization workspace activity and project statusReRune dashboard showing localization workspace activity and project status
ReRune OTA demo mobile app landing screen with live localization status

Common challenge

Copy corrections and new translations can get stuck behind a web deployment, even when the app already has a working translation engine.

Best fit

Angular 18+ teams using ngx-translate 18 or Transloco 8 that want OTA updates for their root translation catalog.

How ReRune helps

One root provider connects the native engine to published ReRune text, browser caching, and Main or named variants. Reactive views update through the engine’s own APIs.

Angular integration

Native rendering, published text, one root provider.

The SDK adapts to ngx-translate or Transloco. It handles OTA fetch, cache, and merge while your chosen engine continues to render translations.

  1. Choose your engine adapter

    Import ReRune from the selected adapter entry point. Replace provideTranslateService(...) or provideTransloco(...) with ReRune.provide(..., nativeOptions) at the root. Keep loaders and native options; retain separate plugin providers in their existing order. Do not register the native provider again.

  2. Start with bundled or cached text

    Browser startup does not wait for OTA requests. ReRune restores cached translations, then checks for updates. The default store uses localStorage with an in-memory fallback. An app-owned HTTP loader still needs its own offline strategy.

  3. Render translated HTML on the server

    Use the same root provider with Angular SSR and hydration. The server waits for initialization and passes translations through TransferState. Keep startup checks enabled for fresh OTA text and translate metadata after initialization. Deferred hydration needs a hydrationReady promise.

  4. Publish to the root translation catalog

    OTA supports plain text, named interpolation, and count-based cardinal plurals. Child catalogs, Transloco scopes, @angular/localize, XLIFF, and general ICU message grammar are outside this adapter. One-shot translated strings must be read again to reflect an update.

SDK technical reference

ReRune for Angular

@rerune/angular 1.6.0 replaces your native root provider and accepts its unchanged options. Keep ngx-translate or Transloco pipes, loaders, and language switching.

Version-pinned guidance from the published package README. Follow the linked README for the complete API and current release notes.

Package
@rerune/angular
Current release
1.6.0
Requirements
Angular 18+, RxJS 7; ngx-translate 18 or Transloco 8

Install command

npm install @rerune/angular@1.6.0

View on npmngx-translate example appTransloco example appSSR and SEO

The linked example apps use SDK 1.6.0. They include native setup, language and variant controls, and manual refresh. Use the package README for the API reference.

README at a glance

Runtime contract

  • Replace the native root provider with ReRune.provide(..., nativeOptions)
  • Keep native reactive pipes, interpolation, and language switching
  • Restore cached OTA text over bundled translations with built-in browser storage
  • Use the same provider for Angular SSR and TransferState hydration
  • Select Main or a named translation variant at setup or runtime
  • Preview enabled drafts in an isolated staging mode before publishing
Angularngx-translateTranslocoSSROTA

Quick Start

Translation engine

Install command

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

Keep your native loader

This translations.ts example uses your existing English and German JSON files and the README’s in-memory loader pattern. Keep your own loader and paths. ReRune does not cache native HTTP loader responses.

Keep your native 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] ?? {})
  }
}

Alternative setups: replace Before with After. Do not run both.

After ReRune

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 },
    }),
  ],
}

BundledLoader in translations.ts represents your existing JSON or HTTP loader. Replace provideTranslateService(...) with ReRune.provide(..., nativeOptions); keep the same loader and options. supportedLocales covers root languages known only to the lazy loader, such as German here. Register once at the root and keep other app and plugin providers in order.

Browser bootstrap does not wait for OTA; native loaders retain their own startup and offline requirements. Keep normal Angular SSR and TransferState configuration. OTA targets the root catalog; @angular/localize, child catalogs, and Transloco scopes remain unsupported. ReRuneService is optional for status and controls.
Existing instances, plugins, and attachment

If the root engine is already registered elsewhere, omit native options to attach without registering it again. Use either combined setup or attachment, once at the root. A publish ID does not replace your native engine configuration.

Translation code stays the same

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslatePipe],
  template: "<h1>{{ 'headline' | translate }}</h1>",
})
export class AppComponent {
  readonly translations = inject(TranslateService)

  selectLanguage(locale: string) {
    this.translations.use(locale).subscribe()
  }
}

Removing ReRune

Restore the native root provider from Before ReRune with the same options, loader, and plugin order. Remove optional ReRune service controls and imports, then uninstall @rerune/angular. Keep your native engine dependencies, pipes, services, and language switching. Native bundles or loaders must cover the messages you need because OTA and variants stop. Apply this source change and restart the app; provider removal is not live rollback.

Uninstall the SDK

npm uninstall @rerune/angular

Workflow

From app copy to release-ready localization.

ReRune connects translation management to the delivery path developers already use: dashboard work, AI assistance, CLI/API sync, and OTA updates where a supported SDK is installed.

Install the SDK

Connect the supported app runtime to a ReRune publish ID while keeping native or framework localization behavior in place.

Publish approved text

Approve translation changes in the workspace, then publish runtime updates without turning every text fix into a full store release.

Refresh visible copy

Let supported SDK hooks check for updates and refresh text when new approved localization payloads are available.

Keep fallbacks intact

When runtime updates are unavailable, the app keeps reading bundled resources so localization failures do not break the product.

Setup WizardAI Coding Agent

One command. A wizard sets the stage, your AI agent ships it.

Run the onboarding command from the root of your Git repository. The wizard inspects the app and confirms the plan with you, with no AI involved and nothing changed yet. Then it opens the coding agent you already use with a complete migration workflow.

Run inside your Git repository

curl -fsSL https://rerune.io/onboard.sh | sh

View current scriptView v1.2.6Changelog

The script runs locally. ReRune does not receive your source code or list of installed agents.

Coding agent integrations

11 integrations: 4 available now, 7 planned.

  • Claude CodeReady
  • CodexReady
  • OpenCodeReady
  • PiReady
  • GitHub Copilot CLIPlanned
  • GoosePlanned
  • Qwen CodePlanned
  • Cursor AgentPlanned
  • Kiro CLIPlanned
  • Cline CLIPlanned
  • Factory DroidPlanned

Coverage

App-first does not mean mobile-only.

Start where localization creates release friction, then keep web, mobile, and cross-platform products in one shared workspace as your surface area grows.

Developer delivery

Sync through the CLI. Publish through OTA SDKs.

Use the ReRune CLI locally or in CI/CD to manage project translations, then deliver approved runtime updates through the SDK built for your app.

Companion CLI

Install the ReRune CLI

Use the ReRune CLI to sync, validate, and manage translations right from your terminal. Run syncs in CI/CD or locally whenever you need to push a new language.

Homebrew (macOS/Linux):

brew install BasalBit/tap/rerune
  • Downloadable builds for macOS, Linux, and Windows
  • Uses the API keys you generate in the dashboard
  • Fits scripted CI/CD workflows through CLI and API access
rerune

Connect the project

Create the project config and connect the repository to its ReRune workspace.

rerune pull

Pull approved updates

Bring current dashboard translations into the app or its build workflow.

rerune push

Push local changes

Send local translation updates back to ReRune for the team to manage and publish.

Questions

Questions teams ask before choosing a localization platform.

Contact the ReRune team

Share an idea, report a problem, or ask for help with ReRune.

Which Angular translation libraries does ReRune support?

@rerune/angular supports Angular 18+ and RxJS 7 with ngx-translate 18 or Transloco 8. Install only the engine your app uses and import the matching adapter entry point. The package root does not export a setup API.

Do I need to replace my translation pipes or loaders?

No. Replace the native root provider call with ReRune.provide(..., nativeOptions), passing its unchanged configuration once. Keep loaders, pipes, services, and language switching. Preserve separate plugin providers after the combined provider. Values saved from one-shot translation calls still need to be read again after an update.

Can Angular translations work offline?

Bundled translations remain available, and previously cached OTA text can be restored from browser storage. Dashboard-only languages require an earlier successful fetch to work offline. ReRune does not cache your own HTTP loader responses; failed browser storage falls back to memory for the current session.

Does ReRune support Angular SSR and SEO?

Yes. The root provider initializes translations during server rendering and transfers them through Angular TransferState for the browser’s first render. Keep startup checks enabled for server-rendered OTA text and compute translated metadata after initialization. Incremental or deferred hydration requires hydrationReady. Browser-only updates cannot change HTML already sent to a crawler.

Can Angular apps switch translation variants at runtime?

Yes. Start with ReRune.Main or a published variant slug in ReRune.provide(...), then use ReRuneService.setVariant(...) to change it. Missing variant overrides fall back to Main. Variants select wording; they do not restrict access to delivered project resources.

Explore next

Keep exploring the localization workflow.

Go deeper into the developer, platform, and delivery workflows connected to this page.

Web app localization connected to the same product workflow.

Manage web app localization with translation keys, AI assistance, CLI/API sync, and OTA delivery through ReRune SDKs for React and Angular.

React localization that stays connected to product delivery.

Adopt React OTA localization with SDK 1.6.0. Replace startup wiring, preserve i18next translation calls, and restore native setup when removing ReRune.

OTA localization updates without making every copy fix a release.

Deliver published app text through ReRune OTA SDKs, preview enabled drafts in staging clients, and keep production caches isolated with fallback and rollback.

One workspace

Start with one product workflow and expand from there.

Create projects, manage keys, use AI assistance with context, sync through CLI/API, and publish approved runtime updates when your app uses a supported ReRune SDK.
Start localizingPricing