angular logoAngular Docs
آنلاین

Merge کردن ترجمه‌ها داخل application

برای merge کردن translationهای کامل‌شده داخل پروژه خود، actionهای زیر را انجام دهید.

variant application یک copy کامل از فایل‌های distributable application شماست که برای یک locale ترجمه شده است.

  1. از [Angular CLI][CliMain] برای build کردن یک copy از فایل‌های distributable پروژه خود استفاده کنید.
  2. از option مربوط به "localize" استفاده کنید تا همه i18n messageها با translationهای معتبر جایگزین شوند و یک localized variant application build شود.

بعد از merge کردن translationها، هر copy distributable از application را با server-side language detection یا subdirectoryهای متفاوت serve کنید.

برای translation در compile-time، فرایند build از ahead-of-time \(AOT\) compilation استفاده می‌کند تا applicationای کوچک، سریع و آماده اجرا تولید کند.

فرایند build برای translation fileهایی با format مربوط به .xlf یا format دیگری که Angular می‌فهمد، مثل .xtb، کار می‌کند. برای اطلاعات بیشتر درباره formatهای translation file که Angular استفاده می‌کند، [Change the source language file format][GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat] را ببینید.

برای build کردن یک copy distributable جداگانه از application برای هر locale، [localeها را در build configuration تعریف کنید][GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]؛ در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] پروژه خود.

این روش با حذف نیاز به انجام build کامل application برای هر locale، فرایند build را کوتاه‌تر می‌کند.

برای [تولید application variant برای هر locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]، از option مربوط به "localize" در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] استفاده کنید. همچنین برای [build از command line][GuideI18nCommonMergeBuildFromTheCommandLine]، از دستور [build][CliBuild] در [Angular CLI][CliMain] همراه با option مربوط به --localize استفاده کنید.

تعریف localeها در build configuration

از option پروژه یعنی i18n در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] پروژه خود استفاده کنید تا localeها را برای یک پروژه تعریف کنید.

sub-optionهای زیر source language را مشخص می‌کنند و به compiler می‌گویند translationهای پشتیبانی‌شده پروژه را کجا پیدا کند.

Suboptionجزئیات
sourceLocalelocaleای که داخل source code برنامه استفاده می‌کنید \(en-US به صورت پیش‌فرض\). همچنین می‌تواند objectای با propertyهای code، baseHref و subPath باشد.
localesmapای از locale identifierها به translation fileها. هر entry همچنین می‌تواند objectای با propertyهای translation، baseHref و subPath باشد.

برای فهرست کامل propertyهای i18n و typeهایشان، [i18n options][GuideWorkspaceConfigI18n] را ببینید.

مثال angular.json برای en-US و fr

برای مثال، excerpt زیر از فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig]، source locale را روی en-US تنظیم می‌کند و path مربوط به translation file برای locale فرانسوی \(fr\) را فراهم می‌کند.

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

تولید application variant برای هر locale

برای استفاده از locale definition خود در build configuration، از option مربوط به "localize" در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] استفاده کنید تا به CLI بگویید کدام localeها را برای build configuration تولید کند.

  • "localize" را روی true بگذارید تا همه localeهایی که قبلاً در build configuration تعریف شده‌اند build شوند.
  • "localize" را روی آرایه‌ای از subset مربوط به locale identifierهای قبلاً تعریف‌شده بگذارید تا فقط همان نسخه‌های locale build شوند.
  • "localize" را روی false بگذارید تا localization غیرفعال شود و هیچ نسخه مخصوص locale تولید نشود.

اگر این setting را تغییر داده‌اید، برای استفاده از AOT مقدار "aot" را روی true بگذارید.

اگر option مربوط به "localize" را روی true بگذارید، بیش از یک locale تعریف کنید و از ng serve استفاده کنید، خطا رخ می‌دهد. اگر می‌خواهید با یک locale مشخص development کنید، option مربوط به "localize" را روی همان locale مشخص تنظیم کنید. برای مثال، برای French \(fr\)، مقدار "localize": ["fr"] را مشخص کنید.

CLI، locale data را load و register می‌کند، هر نسخه تولیدشده را در directory مخصوص همان locale قرار می‌دهد تا از نسخه‌های locale دیگر جدا بماند، و directoryها را داخل outputPath configureشده برای پروژه قرار می‌دهد. برای هر application variant، attribute مربوط به lang در element مربوط به html روی locale تنظیم می‌شود. CLI همچنین HTML base HREF را برای هر نسخه application با افزودن locale به baseHref configureشده تنظیم می‌کند.

property مربوط به "localize" را به عنوان shared configuration تنظیم کنید تا عملاً برای همه configurationها inherit شود. همچنین، property را برای override کردن configurationهای دیگر تنظیم کنید.

مثال angular.json برای include کردن همه localeها از build

مثال زیر option مربوط به "localize" را در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] روی true نشان می‌دهد، تا همه localeهای تعریف‌شده در build configuration build شوند.

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

Build از command line

همچنین از option مربوط به --localize همراه با دستور [ng build][CliBuild] و configuration موجود production خود استفاده کنید. CLI همه localeهای تعریف‌شده در build configuration را build می‌کند. اگر localeها را در build configuration تنظیم کرده باشید، شبیه زمانی است که option مربوط به "localize" را روی true تنظیم می‌کنید.

shell
# #docregion add-localize
ng add @angular/localize
# #enddocregion add-localize

# #docregion extract-i18n-default
ng extract-i18n
# #enddocregion extract-i18n-default

# #docregion extract-i18n-output-path
ng extract-i18n --output-path src/locale
# #enddocregion extract-i18n-output-path

# #docregion extract-i18n-formats
ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb
# #enddocregion extract-i18n-formats

# #docregion extract-i18n-out-file
ng extract-i18n --out-file source.xlf
# #enddocregion extract-i18n-out-file

# #docregion build-localize
ng build --localize
# #enddocregion build-localize

# #docregion serve-french
ng serve --configuration=fr
# #enddocregion serve-french

# #docregion build-production-french
ng build --configuration=production,fr
# #enddocregion build-production-french

اعمال build optionهای مشخص فقط برای یک locale

برای اعمال build optionهای مشخص فقط روی یک locale، یک locale منفرد را مشخص کنید تا یک custom locale-specific configuration ساخته شود.

مثال build برای French

مثال زیر یک custom locale-specific configuration با استفاده از یک locale منفرد را نمایش می‌دهد.

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

این configuration را به دستورهای ng serve یا ng build پاس دهید. مثال code زیر نشان می‌دهد چطور فایل زبان French را serve کنید.

shell
# #docregion add-localize
ng add @angular/localize
# #enddocregion add-localize

# #docregion extract-i18n-default
ng extract-i18n
# #enddocregion extract-i18n-default

# #docregion extract-i18n-output-path
ng extract-i18n --output-path src/locale
# #enddocregion extract-i18n-output-path

# #docregion extract-i18n-formats
ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb
# #enddocregion extract-i18n-formats

# #docregion extract-i18n-out-file
ng extract-i18n --out-file source.xlf
# #enddocregion extract-i18n-out-file

# #docregion build-localize
ng build --localize
# #enddocregion build-localize

# #docregion serve-french
ng serve --configuration=fr
# #enddocregion serve-french

# #docregion build-production-french
ng build --configuration=production,fr
# #enddocregion build-production-french

برای production buildها، از configuration composition برای اجرای هر دو configuration استفاده کنید.

shell
# #docregion add-localize
ng add @angular/localize
# #enddocregion add-localize

# #docregion extract-i18n-default
ng extract-i18n
# #enddocregion extract-i18n-default

# #docregion extract-i18n-output-path
ng extract-i18n --output-path src/locale
# #enddocregion extract-i18n-output-path

# #docregion extract-i18n-formats
ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb
# #enddocregion extract-i18n-formats

# #docregion extract-i18n-out-file
ng extract-i18n --out-file source.xlf
# #enddocregion extract-i18n-out-file

# #docregion build-localize
ng build --localize
# #enddocregion build-localize

# #docregion serve-french
ng serve --configuration=fr
# #enddocregion serve-french

# #docregion build-production-french
ng build --configuration=production,fr
# #enddocregion build-production-french
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

گزارش translationهای missing

وقتی translationای missing باشد، build موفق می‌شود اما warningای مثل Missing translation for message "{translation_text}" تولید می‌کند. برای configure کردن level مربوط به warningای که compiler Angular تولید می‌کند، یکی از levelهای زیر را مشخص کنید.

Warning levelجزئیاتOutput
errorerror پرتاب می‌کند و build fail می‌شودn/a
ignoreهیچ کاری انجام نمی‌دهدn/a
warningwarning پیش‌فرض را در console یا shell نمایش می‌دهدMissing translation for message "{translation_text}"

warning level را در section مربوط به options برای target مربوط به build در فایل build configuration مربوط به workspace یعنی [angular.json][GuideWorkspaceConfig] مشخص کنید.

مثال warning با error در angular.json

مثال زیر نشان می‌دهد چطور warning level را روی error تنظیم کنید.

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

این یعنی Angular application شما بعد از compilation ترجمه می‌شود. همچنین یعنی می‌توانید نسخه‌های localized از Angular application خود بسازید، بدون اینکه کل پروژه Angular را برای هر locale دوباره compile کنید.

وقتی Angular application خود را ترجمه می‌کنید، translation transformation بخش‌های \(static stringها و expressionها\) template literal string را با stringهایی از مجموعه‌ای از translationها جایگزین و reorder می‌کند. برای اطلاعات بیشتر، [$localize][ApiLocalizeInitLocalize] را ببینید.

TLDR: یک بار compile کنید، سپس برای هر locale ترجمه کنید.

قدم بعدی

[ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular' [CliMain]: cli 'CLI Overview and Command Reference | Angular' [CliBuild]: cli/build 'ng build | CLI | Angular' [GuideBuild]: tools/cli/build 'Building and serving Angular apps | Angular' [GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale 'Apply specific build options for just one locale - Merge translations into the application | Angular' [GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line 'Build from the command line - Merge translations into the application | Angular' [GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration 'Define locales in the build configuration - Merge translations into the application | Angular' [GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale 'Generate application variants for each locale - Merge translations into the application | Angular' [GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format 'Change the source language file format - Work with translation files | Angular' [GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular' [GuideWorkspaceConfigI18n]: reference/configs/workspace-config#i18n-options 'i18n options - Angular workspace configuration | Angular'