Is there a way to reroute users to different locale builds in Angular (using Vercel)?

63 views Asked by At

I use Angular's internationalization and localization. I have my project on three different languages: English, Georgian and Russian. This is my i18n configuration in angular.json

"i18n": {
    "sourceLocale": {
      "code": "en",
      "baseHref": "en/"
    },
    "locales": {
      "ka": {
        "translation": "src/locale/messages.ka.xlf",
        "baseHref": "ka/"
      },
      "ru": {
        "translation": "src/locale/messages.ru.xlf",
        "baseHref": "ru/"
      }
    }

Also I have "localize": true in build options.

When I host a website, I get this error unless I add /en, /ka or /ru after https://project-name.vercel.app/ like https://a2b-nine.vercel.app/en

Vercel not found page

I want to automatically reroute to /en, /ru, or /ka based on some conditions. I created vercel.json in my root directory and added following code:

{
  "rewrites": [
    {
      "source": "/",
      "has": [
        {
          "type": "header",
          "key": "accept-language",
          "value": "^en($|,)"
        }
      ],
      "destination": "/en"
    }
  ]
}

This doesn't work even though I can definitely see accept-language header. accept-language header

I have a whole project ready to deploy, I just need to handle routing which is hard because there are different builds and I have to jump between them when user changes the language.

Maybe there's a different, better way for achieving the desired result, and I will appreciate any suggestions. Thanks for the help in advance.

0

There are 0 answers