Angular i18n AOT 编译 - 使用 nginx 的 CI 部署与使用 ng serve 的本地开发

Question

我目前正在开发一个包含 i18n 的 Angular 8 应用程序。我选择了使用 2 个并行运行的独立构建/应用程序的 AOT 方法。其中一个是en，另一个是de。

对于 CI，我有一个管道，它使用 Dockerfile 来构建 2 个不同的构建配置，并将它们放在彼此相邻的 2 个文件夹中。在 2 个 Angular 应用程序前面，我有 nginx 根据 URL 重定向到它们各自的语言文件夹。

Dockerfile：

RUN yarn ng build frontend --configuration=en
RUN yarn ng build frontend --configuration=de

示例： 当我在myapp.com/en下访问我的CI部署时，nginx会访问en文件夹下的应用程序的索引文件。

Nginx 配置：

  location / {
    try_files $uri$args /en/index.html;
  }
  location /en/ {
    alias /usr/share/nginx/html/en/;
    try_files $uri$args $uri$args/ /en/index.html;
  }
  location /de/ {
    alias /usr/share/nginx/html/de/;
    try_files $uri$args $uri$args/ /de/index.html;
  }

这一切都很好，而且效果很好，但现在是实际问题：

对于本地开发，我仍然希望能够使用类似的设置，其中我有两个单独的 AOT 编译的应用程序版本，但我正在寻找一种不使用 nginx 进行本地开发设置的方法。

有没有办法在仅以某种形式使用ng serve -c <locale> 时实现类似的 i18n 应用程序结构？

我知道我可以使用 nginx 在本地进行基本相同的设置并重定向到正确的文件夹，但如果可能的话我不想这样做，因此我不需要单独的 docker 设置（我有我不想在本地运行的 Dockerfile 中的许多其他内容）。

Answer 1

您可以将以下内容添加到您的 angular.json:
（您可能已经有了构建配置，只需相应地调整serve-configuration 中的browserTarget）

angular.json:

"build": {
  ...
  "configurations": {
    ...
    "en": {
      "aot": true,
      "baseHref": "/en/"
      "outputPath": "dist/en/",
      "i18nFile": "src/locale/messages.en.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "en",
      ...
    }
    /* same for "de" with different params */
  }
},
"serve": {
  ...
  "configurations": {
    "en": { "port": 4201, "browserTarget": "*project-name*:build:en" },
    "de": { "port": 4202, "browserTarget": "*project-name*:build:de" }
    ...
  }
}

运行ng s -c=en 或将以下内容添加到您的package.json

"scripts" : {
  "serve-en": "ng serve --configuration=en",
  "serve-de": "ng serve --configuration=de",
  ...
}

该网站将在http://localhost:4200/en/ 下提供服务。除了/de 或/en 之外的任何其他路径都会抛出GET-错误。 （您的配置可能会有所不同）

这将像 ng serve 一样构建应用程序，只是使用构建配置（使用 i18n）。这在重新编译时可能会很慢，因此您可能希望创建一个单独的配置来服务您的应用程序（没有构建优化等。也许baseHref="/"）。

查看官方文档：https://angular.io/guide/i18n#merge-with-the-aot-compiler

---

添加到您的评论：

以下将使用默认构建选项，默认情况下应禁用优化。 （端口在服务配置中设置） 为"buildTarget": "project:build:en-serve" 构建配置：

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/**project-name**",
        "index": "src/index.html",
        "main": "src/main.ts",
        "baseHref": "/",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [...],
        "styles": [...]
      },
      "configurations": {
        "en-serve": {
          "aot": true,
          "i18nLocale": "en",
          "outputPath": "dist/en",
          "i18nFile": "src/locale/messages.en.xlf",
          "i18nFormat": "xlf",
          "i18nMissingTranslation": "warn"
        },
       "other configs" ...
      }
    }
  }