nx-ng-esbuild

0.5.3 verified Fri May 01 auth: no javascript

An Nx plugin that enables using ESBuild as the build system for Angular applications within an Nx workspace. Version 0.5.3 is the current stable release. The package provides generators to add ESBuild configuration to existing Angular apps or scaffold new apps with ESBuild support. It offers faster builds compared to the default Angular builder, though it currently produces larger bundle sizes and lacks features like type checking, file hashing, caching, and production readiness. It supports build, watch, and serve modes. The library is in early development and not recommended for production use.

Common errors

error Cannot find module 'nx-ng-esbuild' or its corresponding type declarations. ↓

cause Package not installed or TypeScript cannot resolve types.

fix

Ensure package is installed: npm install --save-dev nx-ng-esbuild

error Schema validation failed: Data path '' must NOT have additional properties (port). ↓

cause Passing unsupported options to the executor, e.g., 'port' is only valid when 'serve=true'.

fix

Ensure 'serve' option is set to true when using 'port': nx run app:esbuild --serve=true --port=4201

error TypeError: Cannot read properties of undefined (reading 'project') ↓

cause Generator called without a valid project name.

fix

Provide a valid project name: nx g nx-ng-esbuild:add-esbuild-config myApp

Warnings

breaking Package is not production-ready and may have breaking changes between minor versions. ↓

fix Pin to exact version and test upgrades carefully.

gotcha Does not run TypeScript type checking; type errors will not be caught during build. ↓

fix Add a separate type-checking step (e.g., tsc --noEmit).

gotcha Larger bundle size compared to the default Angular builder. ↓

fix Consider alternative builders if bundle size is critical.

gotcha Does not hash output files; caching and incremental builds not supported natively. ↓

fix Implement custom hashing or use Nx caching with proper inputs.

gotcha Dry run mode likely does not work for generators. ↓

fix Do not rely on --dry-run; test changes on a separate branch.

Install

npm install nx-ng-esbuild

yarn add nx-ng-esbuild

pnpm add nx-ng-esbuild

Imports

createNodes

wrong

const { createNodes } = require('nx-ng-esbuild')

correct

import { createNodes } from 'nx-ng-esbuild'

ESM-only package; CommonJS require is not supported.

NxAngularEsbuildPlugin

wrong

import NxAngularEsbuildPlugin from 'nx-ng-esbuild'

correct

import { NxAngularEsbuildPlugin } from 'nx-ng-esbuild'

Named export, not default.

executor (buildExecutor)

wrong

import { buildExecutor } from 'nx-ng-esbuild'

correct

import { executor } from 'nx-ng-esbuild/build'

Executor is exported from a subpath.

Quickstart

Commands to install the plugin, generate a new Angular app, build, and serve with custom port.

// Install the plugin
// npm install --save-dev nx-ng-esbuild

// Generate a new Angular app with ESBuild support
// nx g nx-ng-esbuild:app myApp

// Build the app
// nx run myApp:esbuild

// Serve with watch mode on port 4201
// nx run myApp:esbuild --serve=true --watch=true --port=4201

// Add ESBuild configuration to an existing app
// nx g nx-ng-esbuild:add-esbuild-config existingApp