From d118d09aba13ece71181dbb70e114f1dc77d4ee3 Mon Sep 17 00:00:00 2001
From: Julien Gautier <jgautier.webdev@gmail.com>
Date: Mon, 11 May 2026 22:12:24 +0200
Subject: [PATCH] fix(portal-shell): catch-all route prevents NG04002 on /fr in
 dev mode (#96)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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: https://git.unespace.com/julien/apf_portal/pulls/96
---
 apps/portal-shell/src/app/app.routes.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/portal-shell/src/app/app.routes.ts b/apps/portal-shell/src/app/app.routes.ts
index ef48a31..5e89e14 100644
--- a/apps/portal-shell/src/app/app.routes.ts
+++ b/apps/portal-shell/src/app/app.routes.ts
@@ -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: '',
+  },
 ];