From 07f2e0c34e701c11d7fd2e7956ac8c5f1607fdf4 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Fri, 10 Apr 2020 14:54:40 +0900 Subject: [PATCH] docs: integrate webserver configuration (#36553) The article previously referred was out of date. Most of the article content was already duplicated here, or described how to generate multiple bundles. But creating multiple bundles manually is now obsolete and the parameter `--localize` should be preferred instead, because it is much faster. This commit integrate the only interesting part left, relating to webserver configuration. Co-authored-by: David Shevitz PR Close #36553 --- aio/content/guide/i18n.md | 79 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 2 deletions(-) diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md index 95aa0e9553..2a9e686761 100644 --- a/aio/content/guide/i18n.md +++ b/aio/content/guide/i18n.md @@ -774,8 +774,83 @@ The HTML `base` tag with the `href` attribute specifies the base URI, or URL, fo You can also use the CLI `--baseHref` option with [`ng build`](cli/build "CLI reference for ng build") to declare the base `href` at compile time. -Configuring servers for hosting multiple locales is outside the scope of this guide. -For details on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide"). +### Configuring servers + +Typical deployment of multiple languages serve each language from a different subdirectory. +Users are redirected to the preferred language defined in the browser using the +`Accept-Language` HTTP header. If the user has not defined a preferred language, +or if the preferred language is not available, then the server falls back to the default language. +Users can change the language by navigating to other subdirectories, which often occurs using a +menu implemented in the application. + +For more information on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide"). + +#### Nginx + +The following is an example of an Nginx configuration. + +``` +http { + + # Browser preferred language detection (does NOT require AcceptLanguageModule) + map $http_accept_language $accept_language { + ~*^de de; + ~*^fr fr; + ~*^en en; + } + # ... +} + +server { + listen 80; + server_name localhost; + root /www/data; + + # Fallback to default language if no preference defined by browser + if ($accept_language ~ "^$") { + set $accept_language "fr"; + } + + # Redirect "/" to Angular app in browser's preferred language + rewrite ^/$ /$accept_language permanent; + + # Everything under the Angular app is always redirected to Angular in the correct language + location ~ ^/(fr|de|en) { + try_files $uri /$1/index.html?$args; + } + # ... +} +``` + +#### Apache + +The following is an example of an Apache configuration. + +``` + + ServerName localhost + DocumentRoot /www/data + + RewriteEngine on + RewriteBase / + RewriteRule ^../index\.html$ - [L] + + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule (..) $1/index.html [L] + + RewriteCond %{HTTP:Accept-Language} ^de [NC] + RewriteRule ^$ /de/ [R] + + RewriteCond %{HTTP:Accept-Language} ^en [NC] + RewriteRule ^$ /en/ [R] + + RewriteCond %{HTTP:Accept-Language} !^en [NC] + RewriteCond %{HTTP:Accept-Language} !^de [NC] + RewriteRule ^$ /fr/ [R] + + +``` {@a app-pre-translation}