I've added internationalization (i18n) to my angular app. And I want it to work this way :

• When the user visits the home component : localhost:4200/ . I detect the locale from localStorage and append it to the existing url on component loading . So that the final url will be something like localhost:4200/detectedLocale (for e.g : localhost:4200/en/)

• Also I want to implement the switching between languages. So when a user selects a new language from the language selector , the url is changed for e.g from localhost:4200/fr/ to localhost:4200/en/

For that I've used window.location.pathname = '/' + selectedLocale. So that the whole pathname gets overwritten.

This worked fine in devel mode. However I had some issues with the angular app being deployed to another backend server.

The backend server routing is something like the following :

• /api : for the rest calls (backend stuff)
• /frontend : for the embedded angular app

I built my angular app using ng build and specified frontend as a base href.

Now when I run the backend server and hit http://host/frontend/ , the home component gets loaded and then I get redirected to http://host/language thing I do not want it to happen.

I guess it is beacause of the window.location.pathname = '/' + selectedLocale thing. (Same when switching between languages).

How can I fix this ? Is there an alternative to the window.location.pathname ? Like a proper way to append the language to the URL in angular with taking consideration of the prefix ( base href ) and without overwriting the whole thing .

Note also that am adding this in my app module :

{ provide: APP_BASE_HREF, useValue: '/' + extractedLanguage },

Any ideas ? Thank you for your help.