Si myapp es el directorio que contiene los archivos distribuibles de tu proyecto, normalmente haces que diferentes versiones estén disponibles para diferentes configuraciones regionales en directorios de configuración regional.
Por ejemplo, tu versión en francés está ubicada en el directorio myapp/fr y la versión en español está ubicada en el directorio myapp/es.
La etiqueta HTML base con el atributo href especifica el URI base, o URL, para enlaces relativos.
Si estableces la opción "localize" en el archivo de configuración de compilación del espacio de trabajo angular.json a true o a un array de IDs de configuración regional, el CLI ajusta el href base para cada versión de la aplicación.
Para ajustar el href base para cada versión de la aplicación, el CLI agrega la configuración regional al "subPath" configurado.
Especifica el "subPath" para cada configuración regional en tu archivo de configuración de compilación del espacio de trabajo angular.json.
El siguiente ejemplo muestra "subPath" establecido como una cadena vacía.
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 un servidor
El despliegue típico de múltiples idiomas sirve cada idioma desde un subdirectorio diferente.
Los usuarios son redirigidos al idioma preferido definido en el navegador usando el encabezado HTTP Accept-Language.
Si el usuario no ha definido un idioma preferido, o si el idioma preferido no está disponible, entonces el servidor recurre al idioma predeterminado.
Para cambiar el idioma, cambia tu ubicación actual a otro subdirectorio.
El cambio de subdirectorio a menudo ocurre usando un menú implementado en la aplicación.
Para más información sobre cómo desplegar aplicaciones a un servidor remoto, consulta Despliegue.
IMPORTANTE: Si estás usando Renderizado del servidor con outputMode establecido en server, Angular maneja automáticamente la redirección dinámicamente basándose en el encabezado HTTP Accept-Language. Esto simplifica el despliegue al eliminar la necesidad de ajustes manuales del servidor o configuración.
Ejemplo de Nginx
El siguiente ejemplo muestra una configuración de 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; } # ...}Ejemplo de Apache
El siguiente ejemplo muestra una configuración de 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>