fix(portal-shell): catch-all route prevents NG04002 on /fr in dev mode (#96)
CI / check (push) Successful in 2m44s
CI / commits (push) Has been skipped
CI / scan (push) Successful in 1m39s
CI / a11y (push) Successful in 1m48s
CI / perf (push) Successful in 4m3s

## Reproducer

1. `pnpm exec nx serve portal-shell` (source-locale dev server, no `--localize`).
2. Open `http://localhost:4200/`, the EN home page renders.
3. Click the locale switcher's **Français** entry in the footer.

Browser navigates to `/fr/`. The Angular CLI dev server applies its SPA fallback and serves the same source `index.html`. The source bundle boots with `<base href="/">`, the router tries to match the URL `/fr/`, finds no route, and rejects the bootstrap promise:

```
ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'fr'
```

## Fix

Add a `{ path: '**', redirectTo: '' }` catch-all to [`app.routes.ts`](apps/portal-shell/src/app/app.routes.ts). Unknown paths now bounce to home gracefully.

## Why this doesn't break production

Production builds with `--localize` emit one bundle per locale, each with its own `<base href="/{locale}/">`. The router never sees the locale segment — `/fr/foo` is normalised to `foo` before route matching, hitting the bundle's `foo` route. The wildcard only fires when **no** declared route matches, which is exactly what we want for genuine 404 paths in either mode.

## What this does NOT fix

The locale switcher's underlying dev-mode limitation stands: under `nx serve` there is no per-locale bundle, so switching to FR from dev mode can only land back on the source-locale bundle. The fix turns the ugly bootstrap error into a silent bounce to home, so the dev iteration is no longer interrupted — but full locale switching still requires the production build (`nx run portal-shell:serve-static` or a real deploy). This matches the limitation already documented in PR #95.

## Test plan

- [x] `pnpm exec nx run-many -t lint test build --projects=portal-shell` — green (40 / 40 specs unchanged).
- [ ] Manual `nx serve` + click Français → URL becomes `/fr/`, page bounces back to `/` with no console error.
- [ ] Manual prod build + serve-static, `/fr/` → loads FR bundle as before, no regression.
- [ ] Manual prod build + serve-static, `/fr/does-not-exist` → router-level 404 catch redirects to `/fr/` (home), no NG04002.

---------

Co-authored-by: Julien Gautier <julien.gautier@apf.asso.fr>
Reviewed-on: #96
This commit was merged in pull request #96.
This commit is contained in:
2026-05-11 22:12:24 +02:00
parent 192cc483b6
commit d118d09aba
+12
View File
@@ -31,4 +31,16 @@ export const appRoutes: Route[] = [
redirectTo: 'accessibility',
pathMatch: 'full',
},
// Catch-all. In production each locale ships with its own
// `<base href="/{locale}/">`, so the router never actually sees
// the locale segment — `/fr/foo` is normalised to `foo` before
// route matching, and unknown paths land here for a graceful
// bounce to home. In dev (`nx serve`) the dev server serves the
// source bundle for any URL, including `/fr/...`; without this
// fallback the router throws NG04002 trying to match `fr` as a
// segment.
{
path: '**',
redirectTo: '',
},
];