Angular 18 SSR with Localisation Breaks Direct URL Access for Routes with Parameters

I’m currently working on an Angular 18 application with server-side rendering (SSR) and localisation (i18n) for en and es. Everything works fine if I navigate within the app using the provided links, but if I attempt to access a URL with a route parameter directly, I receive a 404 error.

My Setup:

Angular 18 SSR enabled (Vercel) Localisation using i18n (en, es)

Example Routes:

export const routes: Routes = [
{
path: '',
loadComponent: () =>
import('./components/splash/splash.component').then(
(c) => c.SplashComponent
),
},
{
path: 'items/:itemCode',
loadComponent: () =>
import('./components/items/items.component').then(
(c) => c.ItemsComponent
),
},
];


Problem:

When I navigate to a route with a parameter (like itemCode) within the app using Angular’s router, everything works fine. However, if I try to go directly to a URL with parameters, it throws 404.

https://example.com/en/items/12345

What I’ve Tried:

• 
  Building the application without localisation works fine. The issue only arises when I enable localisation via the localize option in the angular.json file.
  
  
• 
  Verified my SSR server setup. The app works as expected when navigating through Angular’s router.
  
  
• 
  Non-parameterised routes work fine when accessed directly.
  

Localisation Setup:

This is my angular.json configuration:

"localize": ["en", "es"],
"outputPath": "dist/app",


When building without localize, the app works fine. Once localisation is added, I see the following folder structure:

• dist/app/browser/en
• dist/app/browser/es
• dist/app/server/en
• dist/app/server/es

Question:

Why does SSR with localisation break direct access to URLs with route parameters? How can I ensure that routes with parameters are properly resolved when directly accessed?

Any insights or suggestions would be greatly appreciated!

Continue reading...