发生未处理的异常：开发服务器仅支持每个构建本地化单个区域设置

Question

请告知如何修复此错误，我正在尝试实现本地化，但遇到了此问题。我使用的指南： https: //angular.io/guide/i18n#merge-translations-into-the-app 如果有帮助，我可以使用 ngserve --configuration=ru --open 运行并且应用程序已本地化，但是在我使用 _build.bat 之后，它破坏了我的应用程序，我根本无法再运行它。如果我指定不同的端口，则会抛出错误“NGCC 失败”。这是我的 angular.json 文件中的代码示例：

"projects": {
"operator": {
   "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "ru": "src/locale/messages.ru.xlf"
        }
   },
  "projectType": "application",
  "schematics": {},
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/operator",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "localize": true,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": ["src/version.js"]
      },
      "configurations": {
        "ru": {
            "localize": ["ru"]
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "3mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "operator:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "operator:build:production"
        },
        "ru": {
            "browserTarget": "operator:build:ru"
        }
      }
    }

Answer 1

此外，当我尝试在本地部署特定语言的应用程序时，我遇到了同样的问题。

我的要求是（Angular 15）：

• 生产构建：构建所有语言。
• 本地开发：能够提供选定的语言。

"localize": true,从 中取出build:options并放入build:configurations:production。

然后设置"localize": false进去build:configurations:development。

此外，build:configurations:en使用"localize": ["en"]和为语言（例如“en”和“it”）build:configurations:it设置新的配置"localize": ["it"]。

在该部分中包含以下配置serve：serve:configurations:enwithserve "browserTarget": "MyApp:build:development,en" and :configurations:it with"browserTarget": "MyApp:build:development,it`。

！！！一定要在语言之前使用逗号而不是冒号！！！

然后运行ng serve --configuration=it以启动意大利语应用程序。

这是完整的angular.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myProject": {
      "projectType": "application",
      "i18n": {
        "sourceLocale": "en",
        "locales": {
          "it": {
            "translation": "./src/locale/messages.it.json",
            "baseHref": ""
          }
        }
      },
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/App",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "localize": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "localize": false,
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "en": {
              "localize": ["en"]
            },
            "it": {
              "localize": ["it"]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "MyApp:build:production"
            },
            "development": {
              "browserTarget": "MyApp:build:development"
            },
            "en": {
              "browserTarget": "MyApp:build:development,en"
            },
            "it": {
              "browserTarget": "MyApp:build:development,it"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MyApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@angular-eslint/schematics"
    ],
    "analytics": false
  }
}

Answer 2

在我删除“localize”：true之后，错误从未出现。

Answer 3

这是因为您缺少启动应用程序的区域设置配置。

你应该--configuration=en在之后添加ng serve。不要忘记替换en为所需的语言。