Angular: 11.2.12 multi language localise on page refresh goes to main language

Question

I have 2 version.

1- default mysite.com/

2- nl mysite.com/nl/

When I'm in the nl site mysite.com/nl/ if the pages is refreshed it goes to mysite.com/

I do have a a condition which is when the path: '' should redirect to dashboard like so: mysite.com/dashboard or mysite.com/nl/dashboard

When navigating the the nl site all is well as long as I don't refresh the page.

here is my app-routing file:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'product', component: ProductComponent },
];

Anyone have any suggestion how I could achieve this so when I refresh the nl version it stay in the same url?

UPDATE: So I found out that if I serve the nl version in localhost it works ok when refresh the page it keeps the url in the current locale E.G:mysite.com/nl/dashboard and also redirect correctly to Dashboard if url is the mysite.com/nl/ -> mysite.com/nl/dashboard

So I can only image this is a remote server configuration. I't and nginx server, so anyone have any suggestions on this?

Thanks

Answer 1

This is what worked for me in the remote nginx server:

location /nl/ {
    autoindex on;
    try_files $uri$args $uri$args/ /nl/index.html;
}

That's it now when I refresh the page it stays in the same locale.