ngc-esbuild-devkit

0.0.51 verified Fri May 01 auth: no javascript

An Angular build system alternative that replaces the default @angular-devkit/build-angular with native esbuild bundling for faster compilation. Current version 0.0.51 is early-stage, with weekly releases. It provides custom Angular CLI builders (build, serve, test) that leverage esbuild's speed while integrating with the Angular compiler (ngc). Key differentiators: uses esbuild for bundling instead of Webpack, significantly reducing build times; maintains compatibility with Angular's build pipeline; supports both production and development builds. Ideal for Angular projects seeking faster build performance without migrating away from the Angular CLI toolchain.

Common errors

error Error: Cannot find module 'ngc-esbuild-devkit' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install ngc-esbuild-devkit --save-dev'.

error An unhandled exception occurred: Builder ngc-esbuild-devkit:build not found ↓

cause Builder name misconfiguration in angular.json.

fix

Ensure angular.json uses exactly "ngc-esbuild-devkit:build" (not "ngc-esbuild-devkit:production" or "ngc-esbuild:build").

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

cause Missing 'options' block in builder configuration.

fix

Add an 'options' object in the builder config with at least 'main' and 'tsConfig'.

error ERROR: builder 'ngc-esbuild-devkit:serve' requires 'browserTarget' option. ↓

cause Missing browserTarget in serve configuration.

fix

Add "browserTarget": "your-project-name:build" in serve options.

Warnings

gotcha The package is early-stage (v0.0.51); expect breaking changes in minor versions before 1.0.0. ↓

fix Pin exact version in package.json and review changelog before updating.

gotcha Only compatible with Angular CLI projects using Angular 16+. Does not support older Angular versions. ↓

fix Ensure @angular/core >=16 is used.

breaking Replaces default Webpack-based builders; custom Webpack configs in angular.json (e.g., via @angular-builders/custom-webpack) are not supported. ↓

fix Remove any custom-webpack builder references and use native esbuild options.

gotcha Build output may differ from default Angular builder due to esbuild's bundling; verify asset paths and lazy loading. ↓

fix Test production builds thoroughly; adjust asset references if needed.

deprecated The package is not officially supported by the Angular team; community-driven project. ↓

fix Monitor the repository for updates and consider alternatives like @angular/build (experimental).

Install

npm install ngc-esbuild-devkit

yarn add ngc-esbuild-devkit

pnpm add ngc-esbuild-devkit

Imports

build builder

wrong

"builder": "ngc-esbuild-devkit:production"

correct

// Configure in angular.json: "builder": "ngc-esbuild-devkit:build"

Use the builder reference in angular.json, not a custom command.

serve builder

wrong

"builder": "ngc-esbuild-devkit:dev"

correct

// Configure in angular.json: "builder": "ngc-esbuild-devkit:serve"

The serve builder handles development server with live reload.

test builder

wrong

"builder": "ngc-esbuild-devkit:testing"

correct

// Configure in angular.json: "builder": "ngc-esbuild-devkit:test"

The test builder uses Jasmine/Karma compatible test runner.

Quickstart

Shows how to configure Angular CLI builders for build, serve, and test using ngc-esbuild-devkit in angular.json.

// angular.json builder configuration
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "ngc-esbuild-devkit:build",
          "options": {
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
              ],
              "outputHashing": "all"
            }
          }
        },
        "serve": {
          "builder": "ngc-esbuild-devkit:serve",
          "options": {
            "browserTarget": "my-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            }
          }
        },
        "test": {
          "builder": "ngc-esbuild-devkit:test",
          "options": {
            "main": "src/test.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js"
          }
        }
      }
    }
  }
}