Custom webpack config in angular esbuild

Question

Currently my Angular project uses a custom webpack configuration file.

          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "allowedCommonJsDependencies": [
                ...
            ],
            "customWebpackConfig": {
              "path": "./angular-webpack.config.js",
              "mergeRules": {
                "module": {
                  "rules": "prepend"
                }
              }
            },

And inside my custom configuration I am using some custom environment variables from mt build.
But I want to move over to esbuild, but the issue is that I can't find any good/obvious way to have some custom esbuild config for Angular.

let DefinePlugin = require('webpack/lib/DefinePlugin');
let OS = require('os');

module.exports = {
    plugins: [
        new DefinePlugin({
            VERSION: JSON.stringify(process.env.VERSION || OS.hostname()),
            URL: JSON.stringify(process.env.URL || ''),
        }),
    ],
}

Any help or tips are appreciated of how I should go about implementing custom defined environment variables for Angular esbuild.

Thank you.

Ume

So you want to define a custom env variable for your app using Webpack define plugin ? – Robinette

I want to move to esbuild for Angular. No webpack. But I need to pass in the two environment variables that was used in Webpack. So basically esbuild + environment variables. – Ume

Answer 1

At the moment (Angular 17.1), esbuild-based Angular builders do not officially support changes to esbuild and Vite configs, which, if available, would enable passing environment variables to the built application.

As a workaround, you could use obscure executeDevServerBuilder and createBuilder APIs to wrap the default builders and inject esbuild plugins into the fourth argument of executeDevServerBuilder, like esbuild-plugin-define:

const { executeDevServerBuilder } = require("@angular-devkit/build-angular");
const { createBuilder } = require("@angular-devkit/architect");
const { definePlugin } = require('esbuild-plugin-define')

const builder = function (options, context) {
  return executeDevServerBuilder(options, context, undefined, {
    buildPlugins: [definePlugin({
        process: {
          env: {
            BUILD_TIMESTAMP: process.env.BUILD_TIMESTAMP,
          },
        },
      })]
  });
};
module.exports = createBuilder(builder);

Here's an article that explains the process of wrapping a builder in more detail.

Fortunately, you don't have to make your own wrapper, the dot-env package does exactly that.

Bushing

Where do you put this code? and how do you link this code to the cli? and then how do you set the the variable in environment.ts? – Porpoise

@MurhafSousli You can refer to the following link: npmjs.com/package/@angular-builders/… – Winson

Answer 2

Starting with angular version 17.1, we can add our own esbuild plugins.

First you need to migrate angular to application builder.

If you use Angular CLI

install the @angular-builders/custom-esbuild package

npm i -D @angular-builders/custom-esbuild

In the target build, we change the builder to @angular-builders/custom-esbuild:application. Next, in the "plugins" section, we pass the path to our esbuild plugin.

"architect": {
  ...
  "build": {
    "builder": "@angular-builders/custom-esbuild:application",
    "options": {
      "plugins": ["./esbuild/plugins.ts"],
      ...
    }
  ...

We'd also better change the builder in serve to @angular-builders/custom-esbuild:dev-server

"serve": {
    "builder": "@angular-builders/custom-esbuild:dev-server",
    ...
...

If you use NX workspace

You can also use the @angular-builders/custom-esbuild package, the only difference is that nx builder is called executor. But I recommend using the nx implementation to avoid installing additional dependencies. The NX team also responds faster to angular releases.

In the target build, we change the executor to @nx/angular:application. Next, in the plugins section, we pass the path to our esbuild plugin.

"architect": {
  ...
  "build": {
    "executor": "@nx/angular:application",
    "options": {
      "plugins": ["./esbuild/plugins.ts"],
      ...
    }
  ...

We'd also better change the executor in serve to @nx/angular:dev-server

"serve": {
    "executor": "@nx/angular:dev-server",
    ...
...

Confluence