Angular 12 Language Prefix support

[alan morano]

Hi everyone, 

I am writing an i18n feature for my app, but for each supported language I want to add a prefix to my url e.g.: 
app.com/content (for english)
app.com/fr/content (for french)

app.com/it/content (for italian)

and so on.

I am using ngx-translate and it is fully working in my app, and I have already tried using a provider for APP_BASE_HREF. ex:

  {

      provide: APP_BASE_HREF,

      useFactory: () => {

        const storedLang =  localStorage.getItem('cr-preferred-lang');

        if (environment.supportedLanguages.includes(storedLang)) {

          return storedLang === 'en' ? '/' : `/${storedLang}`;

        } else {

          localStorage.setItem('cr-preferred-lang', 'en');

          return '/';

        }

      }

    }

But whenever I deploy this and try to access a page with the prefix on a new tab it gets returned as error 500.

I have been stuck on this for weeks now, and I am not sure how to handle it.

Any help would be great. Thanks :) 

[Gaurav Kumar]

https://jswebapp.com/product/ionic-6-school-managment-app/