有没有办法扩展angular.json中的配置？

时间：2018-08-28 15:42:45

标签： json angular angular-cli

在构建Angular 6应用程序时，我需要一次指定两件事：

  • 如果是生产或开发版本
  • 我正在使用的语言环境

在我的angular.json中，我有：

"build": {
  ...
  "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
    },
    "pl": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ]
    },
    "en": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ]
    }
  }
}

但是，当我做ng build --configuration=en --configuration=production时，我遇到了一个错误Configuration 'en,production' could not be found。据了解，您一次只能指定一种配置。

这意味着我需要创建单独的en，pl，productionEn，productionPl配置。虽然不是最干净的模式，但我可以接受。

"build": {
  ...
  "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
    },
    "pl": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ]
    },
    "en": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ]
    },
    "productionPl": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    },
    "productionEn": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    }
  }
}

但是我无法忍受的是将整个production配置内容复制并粘贴到productionEn和productionPl中。如果我添加更多的语言环境，或在构建过程中要指定的其他第三个方面，则此模式将成为维护工作的噩梦。不幸的是，这似乎是Angular团队在其documentation中推荐的模式。

是否有一种方法可以告诉Angular CLI productionEn扩展了production，从而不会多次重复相同的配置代码？类似于以下代码：

"build": {
  ...
  "configurations": {
    "production": {
      (...)
    },
    "pl": {
      "extends": "production",
      (...)
    },
    "en": {
      "extends": "production",
      (...)
    }
  }
}

4 个答案:

答案 0 :(得分：4)

最后有一种方法可以在命令行中指定多种配置：

ng build --configuration=en,production

Relevant issue in Angular repo

答案 1 :(得分：3)

通读一些问题和angular.json文档，看来options是项目的默认设置

"architect": {
        "build": {          
          "options": {...}

这些被partial中设置的configurations选项覆盖。来自Angular CLI workspace wiki：

configurations (object): A map of alternative target options.
configurationName (object): Partial options override for this builder.

此issue comment还提到使用configurations作为替代

这听起来好像可以将项目的所有默认值都添加到options对象中，例如将所有重复项从production，productionPl移动到options: {}，然后添加fileReplacements和您需要的其他一些替代项

注意：我还没有测试过，这只是基于文档和问题的建议

答案 2 :(得分：0)

但这对ng serve不起作用，你说？

以下是可能发生的情况：

您尝试运行类似 ng serve --configuration development,quick 的程序，但得到了看起来像 development 的构建。

这是我对 angular12/architect/build/configurations 的配置：

"development": {

    "customWebpackConfig": {
       "path": "custom-webpack.dev.config.js",
       "replaceDuplicatePlugins": true
    },

    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": false,
    "namedChunks": true,
    "aot": true
},

"quick": {

    "fileReplacements": [
        {
            "replace": "src/app/app-routing.module.ts",
            "with": "src/app/app-routing.module.quick.ts"
        }
    ]
}

我有一个标准的开发配置，其中添加了一个名为 quick 的配置，除了来自 development 的选项之外，我还想设置它。

这不是一个神奇的新“快速”构建功能 (!) - 我复制了我的 app-routing 文件，注释掉了除我目前正在使用的模块之外的所有惰性模块并使用 { {1}} 选项来覆盖标准文件。对于大型项目，构建速度明显更快。很明显，虽然我不想意外部署它，但这就是我需要单独配置的原因。

当您运行 fileReplacements 时会发生什么，它会出现在配置的 serve 部分（如下）。如您所见，我在此处添加了 ng serve --configuration development,quick 作为浏览器目标，引用了我上面的内容。

quick

当您要求 "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "angular12:build" }, "configurations": { "production": { "browserTarget": "angular12:build:production" }, "development": { "browserTarget": "angular12:build:development" }, "quick": { "browserTarget": "angular12:build:quick" } }, "defaultConfiguration": "development" }, 时实际发生的是它合并了这两个节点：

--configuration development,quick

结果：

"development": {
   "browserTarget": "angular12:build:development"
}

"quick": {
   "browserTarget": "angular12:build:quick"
}

为什么它现在不起作用是有道理的:-)

解决方案：

幸运的是，解决方案很简单，只需将 "development": { "browserTarget": "angular12:build:development" } 更新为：

serve/quick

然后只需运行：

"quick": { "browserTarget": "angular12:build:development,quick" }

这反过来会将您的 ng-serve --configuration quick 和 development 配置合并到 quick 下，就像您运行 architect/build 一样。

附注。您可能会看到我在使用 ng build。这是允许自定义的 @angular-builders/custom-webpack 包。这与我的答案无关，但允许我向自己证明它确实有效，因为我能够观察到我的 customWebpack 插件正在运行并且只构建了我想要的单个惰性块。

答案 3 :(得分：-2)

您问什么？

"scripts": {
    [...]
    "build-i18n": "for lang in en es fr pt; 
       do ng build --config=$lang;
       done"
 }
相关问题
最新问题