julien
29d16c7527
## 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
121 lines
3.1 KiB
JSON
121 lines
3.1 KiB
JSON
{
|
|
"name": "portal-shell",
|
|
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
"projectType": "application",
|
|
"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",
|
|
"outputs": ["{options.outputPath}"],
|
|
"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": [
|
|
{
|
|
"glob": "**/*",
|
|
"input": "apps/portal-shell/public"
|
|
}
|
|
],
|
|
"styles": ["apps/portal-shell/src/styles.css"]
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"localize": ["en", "fr"],
|
|
"budgets": [
|
|
{
|
|
"type": "initial",
|
|
"maximumWarning": "1mb",
|
|
"maximumError": "1mb"
|
|
},
|
|
{
|
|
"type": "anyScript",
|
|
"maximumWarning": "300kb",
|
|
"maximumError": "300kb"
|
|
},
|
|
{
|
|
"type": "anyComponentStyle",
|
|
"maximumWarning": "5kb",
|
|
"maximumError": "6kb"
|
|
},
|
|
{
|
|
"type": "bundle",
|
|
"name": "styles",
|
|
"maximumWarning": "150kb",
|
|
"maximumError": "150kb"
|
|
}
|
|
],
|
|
"outputHashing": "all"
|
|
},
|
|
"development": {
|
|
"optimization": false,
|
|
"extractLicenses": false,
|
|
"sourceMap": true
|
|
}
|
|
},
|
|
"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",
|
|
"configurations": {
|
|
"production": {
|
|
"buildTarget": "portal-shell:build:production"
|
|
},
|
|
"development": {
|
|
"buildTarget": "portal-shell:build:development"
|
|
}
|
|
},
|
|
"defaultConfiguration": "development"
|
|
},
|
|
"lint": {
|
|
"executor": "@nx/eslint:lint"
|
|
},
|
|
"test": {
|
|
"executor": "@angular/build:unit-test",
|
|
"options": {
|
|
"watch": false
|
|
},
|
|
"configurations": {
|
|
"watch": {
|
|
"watch": true
|
|
}
|
|
}
|
|
},
|
|
"serve-static": {
|
|
"continuous": true,
|
|
"executor": "@nx/web:file-server",
|
|
"options": {
|
|
"buildTarget": "portal-shell:build",
|
|
"port": 4200,
|
|
"staticFilePath": "dist/apps/portal-shell/browser",
|
|
"spa": true
|
|
}
|
|
}
|
|
}
|
|
}
|