Angular routing, internationalization, and deployment-CodePudding

We have an Angular 12 application that has multiple modules like ShippingModule, ReceivingModule, etc. We have set up routes appropriately and can access each module with simple paths like localhost:4200/Shipping and localhost:4200/Receiving.

We have internationalized it and are looking to deploy it to an nginx server. When we do our build, the dist directory contains three complete applications, one for 'en', 'es', and 'vt', which is perfect.

The document at https://angular.io/guide/i18n-common-deploy says we host the main application under one url and rewrite based on the user's accept-language. So if I were to go to www.internaladdresss.com/Shipping, it would rewrite me to www.internaladdress.com/en/Shipping.

However, do we need to recode the routes module to have a language id variable, or does having the basehref in each index.html file prevent the need for this? Our example routing module has routes defined like this:

const routes: Routes[
{ path: 'shipping', loadChildren: () => import('./shippingdashboard/shipping.module').then(m=>m.ShippingDashboardModule)},
{ path: 'receiving', loadChildren: () => import('./receivingdashboard/receiving.module').then(m => m.ReceivingDashboardModule)}];
@NgModule({
import: [RouterModule.forRoot(routes)],
exports:[RouterModule]
})
export class AppRoutingModule{}

In order for the URLs to work, will we need to define routes like path: 'langId:/shipping and langId:/receiving ?

CodePudding user response：

To answer anyone's suspicions, the answer to this is 'No, you do not need to code for the language identifier in the URL path.'

Each index.html file that is generated has the base href set in the header:

For english,

<base href="/en/">

For Spanish

<base href="/es/">

etc.

The real work came from the nginx configurations.

Obviously the first thing to map the incoming request with is the accept language

map $http_accept_language $accept_language {
    ~*^es es;
    ~*^en en;
}

The next bit took a bit of trial and error, but it is pretty straightforward once you see it:

# Fallback to default language if no preference defined by browser
if ($accept_language ~ "^$") {
  set $accept_language "en";
}

# Redirect "/" to Angular application in the preferred language of the browser
rewrite ^/$ /$accept_language permanent;

# Everything under the Angular application is always redirected to Angular in the
# correct language
location ~ ^(?!/(en|es)) {
  try_files $uri /en/index.html$args =404;
}

The last area is the real crux of the solution. If the user specifies a language that is not in any supported language, redirect their request underneath the English site by default.

To sum up, you need not program language identifiers into your router. Most of the work is just setting up nginx to interpret and redirect correctly based on detecting the language (or lack of language) to the right site folder.