search

lostium / ssr-i18n-angular17

This project is a basic example of how to use Server Side Rendering with multi-language (i18n) websites using Angular 17.
17 stars 4 forks source link

href issue if url string differs from ISO locale #6

Open bengoevaerts opened 1 month ago

bengoevaerts commented 1 month ago

First of all, this project helped me out a lot. Big thanks!

I do have a bug report if the locale string in the url differs from the ISO string. In this exact project this bug is not an issue because all the urls (e.g. /de /es) match de ISO locales (de, es) setup in angular.json.

However when you want for example the url to be /benl for ISO code nl-BE. The hrefs are correct when rendered on the client, but not on the server. Aka when disabling JavaScript (for testing purposes) all href are broken links.

Steps to reproduce

  1. In Angular.json, add the following code into i18n.locales:

    "nl-BE": {
 "translation": "src/locale/messages.nl-BE.xlf",
  "baseHref": "/benl/"
},

  2. In proxy-server.mjs, add the new server:

    import { app as serverBeNl } from './server/nl-BE/server.mjs';
...
server.use('/benl', serverBeNl());

    (You also need a messages.nl-BE.xlf file)

Result server render <a routerlink="/page-1" href="/nl-BE/page-1">Page 1</a> <-- WRONG Result client render <a routerlink="/page-1" href="/benl/page-1">Page 1</a> <-- CORRECT

Interestingly enough the <base href="/benl/"> is correct on both server & client side rendering.

Any help is appreciated.