Common challenge
Copy corrections and new translations can get stuck behind a web deployment, even when the app already has a working translation engine.
Angular localization with your existing translation engine.
Add OTA translations with @rerune/angular 1.5.1 by replacing the ngx-translate or Transloco root provider. Pass its unchanged native options to ReRune and keep your loaders, pipes, and language switching.
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.
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.
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.
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.
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.5.1 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.5.1
- Requirements
- Angular 18+, RxJS 7; ngx-translate 18 or Transloco 8
Install command
npm install @rerune/[email protected]The linked example apps use SDK 1.5.1. 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
Angularngx-translateTranslocoSSROTA
Quick Start
Translation engine
Install command
npm install @rerune/[email protected] @ngx-translate/core@18Keep 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/angularWorkflow
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.
Agent-assisted setup
Run one command. Your coding agent integrates ReRune.
Run the onboarding command from the root of your Git repository. The wizard detects the app and compatible coding agents already installed, then launches the agent you choose to move static UI text into localization, connect ReRune when cloud setup is selected, and validate the result.
Run inside your Git repository
$ curl -fsSL https://rerune.io/onboard.sh | shThe script runs locally. ReRune does not receive your source code or list of installed agents.
Run the onboarding command
Start it from the repository root. It stays in the terminal and detects the app, existing localization, and supported coding agents already installed.
Confirm the detected setup
Review the source locale, Git branch, and whether to connect ReRune cloud and add supported OTA delivery. Nothing changes until you confirm.
The agent completes the integration
The selected agent migrates user-facing strings into the app's localization system, connects ReRune when cloud setup is selected, adds supported OTA setup when requested, and runs the relevant validation.
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
reruneConnect the project
Create the project config and connect the repository to its ReRune workspace.
rerune pullPull approved updates
Bring current dashboard translations into the app or its build workflow.
rerune pushPush 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.
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.
Does the Angular SDK support @angular/localize or Transloco scopes?
No. These adapters update the root ngx-translate or Transloco catalog. Angular extracted message IDs, XLIFF, child catalogs, and named Transloco scopes remain outside OTA. The linked example apps and package reference use SDK 1.5.1.
Contact the ReRune team
Share an idea, report a problem, or ask for help with ReRune.
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.
Read moreReact localization that stays connected to product delivery.
Adopt React OTA localization with SDK 1.5.1. Replace startup wiring, preserve i18next translation calls, and restore native setup when removing ReRune.
Read moreOTA localization updates without making every copy fix a release.
Deliver published app text through ReRune OTA SDKs. See live updates, publication rollback, caching, fallback behavior, and release boundaries.
Read moreOne 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.