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仅适用于特定语言，但是我想在两种语言（一种默认英语）和其他类似语言之间进行选择如果我localhost:4200我想要英语，并且如果我输入URL localhost:4200/fr/，它应该显示其他语言。

如何实现？

Answer 1

ng无法使用其他语言进行投放/构建。有一个开放的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 Server，以用于执行此类操作（例如，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;
        }
    }
}

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

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

1 个答案: