Deploy کردن چند locale

اگر myapp directoryای باشد که فایل‌های distributable پروژه شما را در خود دارد، معمولاً نسخه‌های مختلف را برای localeهای مختلف در directoryهای locale در دسترس قرار می‌دهید. برای مثال، نسخه French شما در directory مربوط به myapp/fr و نسخه Spanish در directory مربوط به myapp/es قرار می‌گیرد.

tag مربوط به HTML base همراه با attribute مربوط به href، base URI یا URL را برای relative linkها مشخص می‌کند. اگر option مربوط به "localize" را در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] روی true یا روی آرایه‌ای از locale IDها بگذارید، CLI مقدار base href را برای هر نسخه application تنظیم می‌کند. برای تنظیم base href برای هر نسخه application، CLI locale را به "subPath" configureشده اضافه می‌کند. "subPath" را برای هر locale در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] مشخص کنید. مثال زیر "subPath" را با string خالی نشان می‌دهد.

angular.json

// #docplaster ...
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  // #docregion locale-config, i18n-subPath
  "projects": {
    "angular.io-example": {
      // #enddocregion locale-config, i18n-subPath
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      // #docregion locale-config, i18n-subPath
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            // #enddocregion locale-config
            "subPath": ""
            // #docregion locale-config
          }
        }
      },
      // #docregion build-production-french
      "architect": {
        // #enddocregion locale-config, i18n-subPath
        // #docregion build-localize-true, build-single-locale, missing-translation-error
        "build": {
          // #enddocregion build-single-locale
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // #enddocregion build-production-french, missing-translation-error
            "localize": true,
            // #enddocregion build-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": [],
            // #docregion missing-translation-error
            "i18nMissingTranslation": "error"
            // #docregion build-localize-true, build-production-french
          },
          // #enddocregion build-localize-true, missing-translation-error
          // #docregion build-single-locale
          "configurations": {
            // #enddocregion build-single-locale, build-production-french
            "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
            },
            // #docregion build-single-locale, build-production-french
            "fr": {
              "localize": ["fr"]
            }
          },
          // #enddocregion build-single-locale, build-production-french
          "defaultConfiguration": "production"
          // #docregion build-single-locale, build-production-french
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            // #enddocregion build-single-locale
            "production": {
              "buildTarget": "angular.io-example:build:production"
            },
            // #enddocregion build-production-french
            "development": {
              "buildTarget": "angular.io-example:build:development"
            },
            // #docregion build-single-locale, build-production-french
            "fr": {
              "buildTarget": "angular.io-example:build:development,fr"
            }
          },
          // #enddocregion build-single-locale, build-production-french
          "defaultConfiguration": "development"
          // #docregion build-single-locale, build-production-french
        },
        // #enddocregion build-single-locale, build-production-french
        "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": []
          }
        }
        // #docregion locale-config, build-single-locale, build-production-french, i18n-subPath
      }
      // #enddocregion build-single-locale, build-production-french
    }
  }
  // #enddocregion i18n-subPath
  // #docregion i18n-subPath
}
// #enddocregion locale-config, i18n-subPath

Configure کردن server

Deployment معمول چند language، هر language را از یک subdirectory متفاوت serve می‌کند. کاربران با استفاده از HTTP header مربوط به Accept-Language به language ترجیحی تعریف‌شده در browser redirect می‌شوند. اگر کاربر language ترجیحی تعریف نکرده باشد، یا اگر language ترجیحی در دسترس نباشد، server به language پیش‌فرض fallback می‌کند. برای تغییر language، location فعلی خود را به subdirectory دیگری تغییر دهید. تغییر subdirectory اغلب با menuای انجام می‌شود که در application پیاده‌سازی شده است.

برای اطلاعات بیشتر درباره deploy کردن appها روی remote server، [Deployment][GuideDeployment] را ببینید.

مثال Nginx

مثال زیر یک Nginx configuration را نمایش می‌دهد.

nginx

# #docregion
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 configuration را نمایش می‌دهد.

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>

[CliBuild]: cli/build 'ng build | CLI | Angular' [GuideDeployment]: tools/cli/deployment 'Deployment | Angular' [GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'