logo标签列表

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

angular
7
请指导如何修复这个错误，我正在尝试实现本地化但出现了问题。 我使用的指南是：https://angular.io/guide/i18n#merge-translations-into-the-app。如果有帮助的话，我能够使用ng serve --configuration=ru --open运行，并且应用程序已本地化，但是在我使用_build.bat之后，我的应用程序崩溃了，我无法再运行它。 如果我指定不同的端口，它会抛出一个"NGCC failed"错误。以下是来自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"
        }
      }
    }
6个回答
10

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

我的要求是（Angular 15）：

  • 生产构建：构建所有语言。
  • 本地开发：能够服务于所选语言。

从build:options中删除"localize": true，并将其放置在build:configurations:production中。

然后在build:configurations:development中设置"localize": false。

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

在serve部分中包含以下配置：serve:configurations:en与"browserTarget": "MyApp:build:development,en"和serve:configurations:it与"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
  }
}
5

当我移除了"localize": true，错误就不再出现了。

虽然这个方法可行，但并不是正确的解决方案。请查看此答案以获取正确的解决方案。https://dev59.com/9-k5XIcBkEYKwwoY3dX9#67669667 - squirtgun
只要 "serve > configurations" 部分在 angular.json 中正确构建，这就是正确的答案。"projects > i18n > sourcelocale" 部分应该指向默认语言，而下面的 "locales" 段落将包含其他语言环境。这样，在开发中不带配置参数的 ng serve 将使用默认的构建语言。 - Rin and Len
4

这是因为您缺少本地化配置以启动应用程序。

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

1
只是让大家知道，您必须手动将 "en" 配置添加到您的 angular.json 中。请参见此答案以了解如何操作。https://dev59.com/9-k5XIcBkEYKwwoY3dX9#67669667 - squirtgun
那给了我不同的错误: 发生未处理的异常: 工作区中未设置“nb”配置。 尽管它之前已被设置，而且前一天可以使用它来构建。 - Rin and Len
2

来自Angular官方文档：

由于i18n的部署复杂性以及需要最小化重建时间的需求，开发服务器仅支持一次本地化单个区域设置。如果定义了多个区域设置，则将“localize”选项设置为true会导致错误当使用ng serve时。如果您想针对特定的区域（如fr）进行开发，则将该选项设置为特定的区域，例如“localize”：[“fr”]。

请参阅此链接以了解更多信息： Angular i18n localize-config

1

我正在使用 Angular 15，我遇到了同样的问题，但是我通过在 browserTarget 中使用逗号而不是冒号来解决了这个问题，就像 @riorudo 在他的答案中坚持的那样。我甚至没有将 localize 更改为 false，在运行ng serve --configuration=en-US和ng serve --configuration=fr之后，它们都像魔法一样工作！

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "fr": {
          "browserTarget": "myApp:build:development,fr"
        },
        "en-US": {
          "browserTarget": "myApp:build:development,en-US"
        },
        "production": {
          "browserTarget": "myApp:build:production"
        },
        "development": {
          "browserTarget": "myApp:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
1
根据文件（https://angular.io/guide/i18n-common-merge）中明确说明的内容：
由于i18n的部署复杂性和需要最小化重建时间的需求，开发服务器一次只支持本地化一个语言环境。
特意将"localize"选项设置为true，并简单定义了多个语言环境，在使用基本的'ng serve'命令时会出现错误（按设计）！
解决方案是使用修改后的'ng serve --configuration:en-US'命令，或者如果想要针对特定的语言环境进行开发（例如'nl'），可以使用'ng serve --configuration:nl'命令。
请查阅'angular.json'文件。

angular.json

  ...
  "projects": {
    "<your-project-name>": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf"
          }
        }
      },
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "localize": [
              "en-Us"
            ],
            "aot": true,
            "i18nMissingTranslation": "error",
            "outputPath": "dist/your-project-name",
            ...
          },
          "configurations": {
            "production": {
              ...
            },
            "development": {
              ...
            },
            "en-US": {
              "localize": [
                "en-US"
              ]
            },
            "nl": {
              "localize": [
                "nl"
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "<your-project-name>:build:production"
            },
            "development": {
              "browserTarget": "<your-project-name>:build:development"
            },
            "en-US": {
              "browserTarget": "<your-project-name>:build:development,en-US"
            },
            "nl": {
              "browserTarget": "<your-project-name>:build:development,nl"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "<your-project-name>:build",
            "format": "xlf",
            "outputPath": "src/locale"
          }
        },
        ...
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "prerender": false,
            "ssr": false,
            "browserTarget": "<your-project-name>:build:production",
            "firebaseProject": "<your-project-name>-i18n",
            "firebaseHostingSite": "<your-project-name>-i18n"
          }
        }
      }
    }
  },

在开发过程中，通过一个终端执行您的“默认”命令（如果需要，在另一个终端使用您所需的语言...）

package.json

 ...
 "scripts": {
    ...
    "start": "ng serve --configuration=en-US",
    "start:en": "ng serve --configuration=en-US",
    "start:nl": "ng serve --configuration=nl",
    ...
  },
  ...
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接