Развертывание нескольких локалей¶

28.02.2022

Если myapp — это каталог, содержащий распространяемые файлы вашего проекта, вы обычно делаете различные версии доступными для разных локалей в каталогах locale. Например, ваша французская версия находится в директории myapp/fr, а испанская версия — в директории myapp/es.

HTML тег base с атрибутом href определяет базовый URI, или URL, для относительных ссылок. Если вы установите опцию "localize" в файле конфигурации сборки рабочего пространства angular.json в значение true или в массив идентификаторов локалей, CLI настроит базовый href для каждой версии приложения.

Чтобы настроить базовый href для каждой версии приложения, CLI добавляет локаль к настроенной "baseHref".

Укажите "baseHref" для каждой локали в файле конфигурации сборки рабочего пространства angular.json.

В следующем примере "baseHref" установлен на пустую строку.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

"projects": {
    "angular.io-example": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": ""
          }
        }
      },
      "architect": {
        // ...
      }
    }
  }
  // ...
}

Также, чтобы объявить базовый href во время компиляции, используйте опцию CLI --baseHref с ng build.

Настройка сервера¶

Типичное развертывание нескольких языков обслуживает каждый язык из отдельного подкаталога. Пользователи перенаправляются на предпочтительный язык, определенный в браузере с помощью HTTP-заголовка Accept-Language.

Если пользователь не определил предпочитаемый язык, или если предпочитаемый язык недоступен, то сервер возвращается к языку по умолчанию.

Чтобы изменить язык, измените текущее местоположение на другой подкаталог.

Смена подкаталога часто происходит с помощью меню, реализованного в приложении.

Пример Nginx¶

В следующем примере показана конфигурация Nginx.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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 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 ~ ^/(fr|de|en) {
        try_files $uri /$1/index.html?$args;
    }
    # ...
}

Пример Apache¶

В следующем примере показана конфигурация Apache.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot /www/data
    <Directory "/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]
    </Directory>
</VirtualHost>

Комментарии