Browser Esbuild Examples

This executor is a drop-in replacement for the @angular-devkit/build-angular:browser-esbuild builder provided by the Angular CLI. It builds an Angular application using esbuild.

In addition to the features provided by the Angular CLI builder, the @nx/angular:browser-esbuild executor also supports the following:

• Providing esbuild plugins
• Incremental builds

:::tip[Dev Server] The @nx/angular:dev-server executor is required to serve your application when using the @nx/angular:browser-esbuild to build it. It is a drop-in replacement for the Angular CLI's @angular-devkit/build-angular:dev-server builder and ensures the application is correctly served with Vite when using the @nx/angular:browser-esbuild executor. :::

Examples

Providing esbuild plugins

The executor accepts a plugins option that allows you to provide esbuild plugins that will be used when building your application. It allows providing a path to a plugin file or an object with a path and options property to provide options to the plugin.

{
  ...
  "targets": {
    "build": {
      "executor": "@nx/angular:browser-esbuild",
      "options": {
        ...
        "plugins": [
          "apps/my-app/plugins/plugin1.js",
          {
            "path": "apps/my-app/plugins/plugin2.js",
            "options": {
              "someOption": "some value"
            }
          }
        ]
      }
    }
    ...
  }
}

const plugin1 = {
  name: 'plugin1',
  setup(build) {
    const options = build.initialOptions;
    options.define.PLUGIN1_TEXT = '"Value was provided at build time"';
  },
};

module.exports = plugin1;

function plugin2({ someOption }) {
  return {
    name: 'plugin2',
    setup(build) {
      const options = build.initialOptions;
      options.define.PLUGIN2_TEXT = JSON.stringify(someOption);
    },
  };
}

module.exports = plugin2;

Additionally, we need to inform TypeScript of the defined variables to prevent type-checking errors during the build. We can achieve this by creating or updating a type definition file included in the TypeScript build process (e.g. src/types.d.ts) with the following content:

declare const PLUGIN1_TEXT: number;
declare const PLUGIN2_TEXT: string;