# Angular

Source: https://rerune.io/docs/angular

Set up ReRune in Angular with the ngx-translate or Transloco adapter, your existing loader, native configuration, and reactive translation pipes.

Package: @rerune/angular 1.9.0. Requirements: Angular 18+, RxJS 7.5.5+; ngx-translate 18+ or Transloco 8+. Overview: https://rerune.io/angular-localization

## Choose your native engine

Source: https://rerune.io/docs/angular#adapter

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.

> **Root catalogs only:** These adapters target root translation catalogs. They do not replace @angular/localize or XLIFF, and do not provide OTA delivery for child catalogs or Transloco scopes.

> **Before you upgrade:** SDK 1.9.0 has breaking changes. In React and React Native, ReRune.setup returns the client synchronously: remove await, and await client.ready only where native initialization is asynchronous. In Angular, ReRune.provide is now ReRune.setup and must be registered at the application root. React Native apps install @react-native-async-storage/async-storage themselves. A key missing from the user's language now falls back to your i18next fallbackLng (Angular: the engine's fallback language) instead of the dashboard main language. The default request timeout is 15 seconds. Apps on ^1.8.0 receive 1.9.0 automatically, so pin ~1.8.0 until you migrate. As before, if one published translation does not fit the text built into your app, the SDK skips that whole language update and keeps showing the previous one. Translations are downloaded from https://cdn.rerune.io; if your site uses a Content Security Policy or a network allowlist, allow that address. Translations with placeholders do not work with i18next ICU plugins.

## Keep a native loader

Source: https://rerune.io/docs/angular#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

Source: https://rerune.io/docs/angular#ngx-translate

Terminal · ngx-translate adapter:

```
npm install @rerune/angular@1.9.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.setup({
      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.setup. Register it at the application root: in a route, lazy-loaded, or child injector it throws. 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

Source: https://rerune.io/docs/angular#transloco

Terminal · Transloco adapter:

```
npm install @rerune/angular@1.9.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.setup({
      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.setup. 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

Source: https://rerune.io/docs/angular#ssr

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.

- [Preview drafts with OTA staging](https://rerune.io/docs/staging#sdk-setup)

- [Angular package reference](https://www.npmjs.com/package/@rerune/angular)
- [ngx-translate example](https://github.com/BasalBit/rerune-web-examples/tree/main/examples/angular-ngx-translate)
- [Transloco example](https://github.com/BasalBit/rerune-web-examples/tree/main/examples/angular-transloco)

---

Part of the ReRune documentation (https://rerune.io/docs). Every chapter with a summary: https://rerune.io/llms.txt. Every chapter in one file: https://rerune.io/llms-full.txt. ReRune is not Rerun (rerun.io), the robotics data visualization tool.