Pass custom environment parameters to @angular-builders/custom-webpack

Question

in our Angular 9 application we have multiple environments configured in angular.json.

We also use @angular-builders/custom-webpack to add some custom plugins that need some input variables based on environment but if I add a custom property to the environment node i get this error:

Data path "" should NOT have additional properties(customPluginConfigForSandboxEnvironment)

"architect": {
   "build": {
     "configurations": {
       "sandbox": {
        "outputPath": ....,
        "customPluginConfigForSandboxEnvironment": {}

Is it possible to do something like this?

In the customWebpackConfig file I can read the outputPath from options

 module.exports = (config, options) => {

and here save my extra configuration, but I prefer to keep all the configurations into the angular.json if it's possible.

Thanks

Answer 1

You can use two separate configuration files:

{
  ...
  "projects": {
    "your-app": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "mergeRules": {
                "externals": "replace"
              }
            },
            ...
          },
          "configurations": {
            "production": {
              "customWebpackConfig": {
                "path": "./webpack.config.prod.ts"
              },
              ...
            },
            "development": {
              "customWebpackConfig": {
                "path": "./webpack.config.dev.ts"
              }
            }
          },
          ...
        }
      }
    }
  }
}