i18n 国际化如何为多语言服务或构建

Question

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular.io-example": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "production-fr": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "outputPath": "dist/my-project-fr/",
              "i18nFile": "src/locale/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr",
              "i18nMissingTranslation": "error"
            },
            "fr": {
              "aot": true,
              "outputPath": "dist/my-project-fr/",
              "baseHref": "/fr/",
              "i18nFile": "src/locale/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr",
              "i18nMissingTranslation": "error"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular.io-example:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular.io-example:build:production"
            },
            "fr": {
              "browserTarget": "angular.io-example:build:fr"
            }
          }
        },

这是我的 angular.json，我使用仅适用于特定语言的 ng serve --configuration=fr 服务，但我想在 两种 语言一种默认英语和其他语言之间工作，例如我 @987654324 @我想要英语，如果我输入 URL localhost:4200/fr/ 它应该显示其他语言。

如何做到这一点？

Answer 1

无法使用不同的语言进行服务/构建。对此有一个开放的issue。

所以你不能用 angular 来做到这一点。使用 Angular，您可以使用不同的语言构建您的应用程序。只需将脚本添加到您的 package.json。例如：

"scripts": {
  "ng": "ng",
  // ..other scripts
  "build:fr": "ng build --aot --configuration=production-fr",
  "build:en": "ng build --aot --configuration=production-en",
  "build-all": "npm run build:fr && npm run build:en",
},

此应用程序应部署到 HTTP 服务器，用于执行此类操作（例如，Apache 与 Rewrite Rules 或 nginx 与 Rewrite Rules

我不能不为所有服务器编写不同的配置，但这是nginx 的示例配置（未经测试，但它应该给你一个想法）

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        listen       80;
        server_name  localhost;

        location /en/ {
             autoindex on;
             try_files $uri$args $uri$args/ /en/index.html;
        }

        location /fr/ {
            autoindex on;
            try_files $uri$args $uri$args/ /fr/index.html;
        }

        # Default to EN
        location / {
            try_files $uri$args /en/index.html;
        }
    }
}

如果您需要更多帮助，请添加您使用的服务器