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

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

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

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

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

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

Дополнительные сведения о развертывании приложений на удаленном сервере см. в разделе Развертывание.

Пример Nginx

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

http {
    # Browser preferred language detection (does NOT require
    # AcceptLanguageModule)
    map $http_accept_language $accept_language {
        ~*^de de;
        ~*^fr fr;
        ~*^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|$) {
        if ($accept_language = "") {
            try_files $uri /index.html?$args;
        }
        try_files $uri /$1/index.html?$args;
    }
    # ...
}

Пример Apache

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

# docregion
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot /www/data

    <Directory "/www/data">
        # Enable rewrite engine for URL manipulation
        RewriteEngine on
        RewriteBase /

        # Serve 'index.html' for root-level access
        RewriteRule ^../index\.html$ - [L]

        # If the requested file or directory does not exist, redirect to 'index.html'
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule (..) $1/index.html [L]

        # Language-based redirection based on HTTP Accept-Language header

        # Redirect German users to the '/de/' directory
        RewriteCond %{HTTP:Accept-Language} ^de [NC]
        RewriteRule ^$ /de/ [R]

        # Redirect English-speaking users to the '/en/' directory
        RewriteCond %{HTTP:Accept-Language} ^en [NC]
        RewriteRule ^$ /en/ [R]

        # Redirect users with unsupported languages (not 'en' or 'de') to the '/fr/' directory
        RewriteCond %{HTTP:Accept-Language} !^en [NC]
        RewriteCond %{HTTP:Accept-Language} !^de [NC]
        RewriteRule ^$ /fr/ [R]
    </Directory>
</VirtualHost>