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

did you ever get environment variables available within your @angular-builders/custom-webpack webpack.config.js file? — Ben Racicot
– Ben Racicot, Commented May 20, 2021 at 1:04

Chris · Accepted Answer · 2022-03-18 23:06:07Z

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"
              }
            }
          },
          ...
        }
      }
    }
  }
}

answered Mar 18, 2022 at 23:06

Chris

2,45616 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davide C Over a year ago

Yes we ended up doing this way. Thanks for your contribution!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related