Se myapp é o diretório que contém os arquivos distribuíveis do seu projeto, você normalmente disponibiliza diferentes versões para diferentes locales em diretórios de locale.
Por exemplo, sua versão em francês está localizada no diretório myapp/fr e a versão em espanhol está localizada no diretório myapp/es.
A tag HTML base com o atributo href especifica o URI base, ou URL, para links relativos.
Se você definir a opção "localize" no arquivo de configuração de build do workspace angular.json como true ou como um array de IDs de locale, o CLI ajusta o href base para cada versão da aplicação.
Para ajustar o href base para cada versão da aplicação, o CLI adiciona o locale ao "subPath" configurado.
Especifique o "subPath" para cada locale no seu arquivo de configuração de build do workspace angular.json.
O exemplo a seguir exibe "subPath" definido como uma string vazia.
angular.json
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular.io-example": { "projectType": "application", "root": "", "sourceRoot": "src", "prefix": "app", "i18n": { "sourceLocale": "en-US", "locales": { "fr": { "translation": "src/locale/messages.fr.xlf", "subPath": "" } } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "localize": true, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": ["src/favicon.ico", "src/assets"], "styles": ["src/styles.css"], "scripts": [], "i18nMissingTranslation": "error" }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "localize": false, "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true }, "fr": { "localize": ["fr"] } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "angular.io-example:build:production" }, "development": { "buildTarget": "angular.io-example:build:development" }, "fr": { "buildTarget": "angular.io-example:build:development,fr" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "angular.io-example:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", "assets": ["src/favicon.ico", "src/assets"], "styles": ["src/styles.css"], "scripts": [] } }, "e2e": { "builder": "@angular-devkit/build-angular:private-protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "angular.io-example:serve:fr" }, "configurations": { "production": { "devServerTarget": "angular.io-example:serve:production" } } } } } }}Configurar um servidor
O deploy típico de múltiplos idiomas serve cada idioma a partir de um subdiretório diferente.
Os usuários são redirecionados para o idioma preferido definido no navegador usando o header HTTP Accept-Language.
Se o usuário não tiver definido um idioma preferido, ou se o idioma preferido não estiver disponível, então o servidor volta para o idioma padrão.
Para mudar o idioma, você muda sua localização atual para outro subdiretório.
A mudança de subdiretório geralmente ocorre usando um menu implementado na aplicação.
Para mais informações sobre como fazer deploy de apps para um servidor remoto, veja Deployment.
IMPORTANT: Se você estiver usando Server rendering com outputMode definido como server, o Angular automaticamente trata o redirecionamento dinamicamente com base no header HTTP Accept-Language. Isso simplifica o deployment eliminando a necessidade de ajustes manuais no servidor ou na configuração.
Exemplo Nginx
O exemplo a seguir exibe uma configuração 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; } # ...}Exemplo Apache
O exemplo a seguir exibe uma configuração 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>