# I18N

> Angular's built-in I18N with Native Federation — how the adapter translates federation artifacts and how to deploy locale-specific remotes.

From adapter version 19.0.13 onwards, the Angular adapter supports Angular's built-in internationalization. The federation builder reads the project's `i18n` block from `angular.json` and runs `localize-translate` over the federation artifacts so a single build emits one bundle copy per target locale — alongside Angular's own locale outputs.

## Setup

### 1. Add I18N to every participating project

```bash
ng add @angular/localize --project shell
ng add @angular/localize --project mfe1
```

Both shell and remotes need `@angular/localize`. Note that `@angular/localize` is in the adapter's [NG_SKIP_LIST](configuration.md#ng_skip_list) — it's deliberately _not_ shared, because it patches globals at boot.

### 2. Configure I18N in `angular.json`

```json
{
  "projects": {
    "mfe1": {
      "i18n": {
        "sourceLocale": "en",
        "locales": {
          "de": "src/locale/messages.de.xlf",
          "fr": "src/locale/messages.fr.xlf"
        }
      }
    }
  }
}
```

Configure I18N in `angular.json`, never via CLI flags. The federation builder does not forward `--localize` or `--i18n-*` flags through to the underlying Application Builder — that's intentional, so the configuration stays declarative.

> **Warning:** I18N must be configured in `angular.json`. CLI flags are **not** forwarded by design.

### 3. Federation manifest per locale

In production, point the host's `federation.manifest.json` at the locale-specific `remoteEntry.json`:

```json
{
  "mfe1": "https://cdn.example.com/mfe1/de/remoteEntry.json"
}
```

Each locale's federation output is a self-contained folder — the host serves the right one for the page's language.

## What the Builder Does

When the underlying Angular target has `localize` configured, the builder:

1. Writes the source-locale federation artifacts to `<outputPath>/browser/<sourceLocale>/`, mirroring Angular's own per-locale layout.
2. For every additional locale: creates the locale folder, copies `remoteEntry.json` into it, and runs `localize-translate` over the source-locale federation files using the translation file declared in `i18n.locales`.
3. Caches the source build so subsequent locales only pay the translation cost.

The output looks like this:

```
dist/mfe1/browser/
├── en/                    ← sourceLocale, raw federation artifacts
│   ├── remoteEntry.json
│   ├── _angular_core.<hash>.js
│   └── ...
├── de/                    ← translated copy
│   ├── remoteEntry.json
│   └── ...
└── fr/
    └── ...
```

### Limitations

- **Dev server** serves a single locale at a time. If you've configured multiple locales, the dev server picks one (or none if the array isn't narrowed) — production builds emit all of them.
- **`localize-translate` is invoked from `node_modules/.bin`**. Make sure your install script doesn't strip it.
- **Source-locale subPath** is honoured (`i18n.sourceLocale` can be a string or an object with `code`/`subPath`) — locale folders fall back to the locale code when no `subPath` is set.

## Related

- [Localization](localization.md) — locale data files (`@angular/common/locales`) and the `shareAngularLocales` helper.
- [Builder → Locale-aware output paths](builder.md#locale-aware-output-paths) — how the federation builder lays out locale folders.