feat(portal-shell): wire @angular/localize plumbing per ADR-0019 (#91)
## Summary
First implementation step of ADR-0019. Wire the `@angular/localize` plumbing into `portal-shell` so the next sweep PR can start marking UI strings without any infrastructure work.
## What changes
- **Promote `@angular/localize` to a direct dependency** (it was already a transitive via the Angular metapackage; promoting it makes the `init` polyfill explicitly resolvable from the project).
- **Configure the `i18n` block** in [`apps/portal-shell/project.json`](apps/portal-shell/project.json):
- `sourceLocale: { code: "en", baseHref: "/en/" }` — matches the project English-only rule.
- `locales.fr: { translation: "...messages.fr.xlf", baseHref: "/fr/" }` — single target locale for now.
- **Add the `init` polyfill** to the build target (`"polyfills": ["@angular/localize/init"]`).
- **Add an `extract-i18n` Nx target** that wraps Angular's `@angular/build:extract-i18n` executor and drops the source XLF next to the translation files.
- **Enable `--localize` on the production build** — `nx build portal-shell --configuration=production` now emits two folders side by side: `dist/apps/portal-shell/browser/en/` and `.../fr/`. Each carries its own `<html lang>` and `<base href>` per the ADR.
- **Seed an empty `messages.fr.xlf`** (XLIFF 1.2 skeleton with sourceLanguage="en" / targetLanguage="fr" and an inline editor convention note). The sweep PR drops `<trans-unit>` entries directly into the body block.
## Verification
```
dist/apps/portal-shell/browser/
├── en/
│ └── index.html ← <html lang="en">, <base href="/en/">
└── fr/
└── index.html ← <html lang="fr">, <base href="/fr/">
```
Until the sweep PR marks strings, both bundles ship the same English source text — that's expected and matches what the ADR calls out ("the FR bundle falls back to source text for every untranslated key").
## What this PR explicitly does NOT do
- **Mark UI strings.** Every `i18n` attribute / `$localize` call lands in the next PR. Pure infra commit here.
- **Locale switcher in the footer** + `__Host-portal_locale` cookie + smart `/` redirect. Lands once switching shows a meaningful difference.
- **Collapse `/accessibility` + `/accessibilite` into a single localised route.** Depends on marked text + localized route paths — sweep PR territory.
- **CI gate** that fails the build on missing translations. Lands when there are translations to be missing.
## Test plan
- [x] `pnpm exec nx run-many -t lint test build --projects=portal-shell` — green (36 / 36 specs unchanged).
- [x] `pnpm exec nx build portal-shell --configuration=production` — produces both locale folders with correct `<html lang>` and `<base href>`.
- [x] `pnpm exec nx run portal-shell:extract-i18n` — runs cleanly, reports `(Messages: 0)` as expected.
- [x] Production initial bundle: **123 kB gzip per locale** (vs 121 kB on `main`; +1.5 kB for the `@angular/localize` runtime polyfill). Both stay well under the 300 KB budget.
- [ ] Manual: `pnpm exec nx serve portal-shell` runs unchanged (source locale `en`, no `--localize` in dev for now).
---------
Co-authored-by: Julien Gautier <julien.gautier@apf.asso.fr>
Reviewed-on: #91
This commit was merged in pull request #91.
This commit is contained in:
@@ -5,6 +5,18 @@
|
||||
"prefix": "app",
|
||||
"sourceRoot": "apps/portal-shell/src",
|
||||
"tags": ["scope:portal-shell", "type:app"],
|
||||
"i18n": {
|
||||
"sourceLocale": {
|
||||
"code": "en",
|
||||
"baseHref": "/en/"
|
||||
},
|
||||
"locales": {
|
||||
"fr": {
|
||||
"translation": "apps/portal-shell/src/locale/messages.fr.xlf",
|
||||
"baseHref": "/fr/"
|
||||
}
|
||||
}
|
||||
},
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular/build:application",
|
||||
@@ -12,6 +24,7 @@
|
||||
"options": {
|
||||
"outputPath": "dist/apps/portal-shell",
|
||||
"browser": "apps/portal-shell/src/main.ts",
|
||||
"polyfills": ["@angular/localize/init"],
|
||||
"tsConfig": "apps/portal-shell/tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
@@ -24,6 +37,7 @@
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"localize": ["en", "fr"],
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
@@ -57,6 +71,14 @@
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"executor": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "portal-shell:build",
|
||||
"outputPath": "apps/portal-shell/src/locale",
|
||||
"outFile": "messages.xlf"
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"continuous": true,
|
||||
"executor": "@angular/build:dev-server",
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
|
||||
<file source-language="en" target-language="fr" datatype="plaintext" original="ng2.template">
|
||||
<body>
|
||||
<!--
|
||||
French translation file for portal-shell.
|
||||
|
||||
Empty in this initial plumbing PR per ADR-0019. The first string
|
||||
sweep PR will mark every UI string in the templates with
|
||||
`i18n="@@<id>"` and add a `<trans-unit id="<id>">` entry below
|
||||
with the French translation. Until then, the production build's
|
||||
`--localize` emits both `dist/apps/portal-shell/browser/en/...`
|
||||
and `dist/apps/portal-shell/browser/fr/...`, but the FR bundle
|
||||
falls back to source text for every untranslated key.
|
||||
|
||||
Editor convention: keep the entries grouped by feature
|
||||
(header.*, sidebar.*, footer.*, page.<route>.*) and ordered
|
||||
alphabetically within each group, so diffs stay readable.
|
||||
-->
|
||||
</body>
|
||||
</file>
|
||||
</xliff>
|
||||
Reference in New Issue
Block a user