{"id":25987,"library":"ngc-esbuild-devkit","title":"ngc-esbuild-devkit","description":"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.","status":"active","version":"0.0.51","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install ngc-esbuild-devkit","lang":"bash","label":"npm"},{"cmd":"yarn add ngc-esbuild-devkit","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngc-esbuild-devkit","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the base builder interface required by Angular CLI builders","package":"@angular-devkit/architect","optional":false},{"reason":"The core bundler replacing Webpack","package":"esbuild","optional":false},{"reason":"Required for Angular template compilation","package":"@angular/compiler-cli","optional":false}],"imports":[{"note":"Use the builder reference in angular.json, not a custom command.","wrong":"\"builder\": \"ngc-esbuild-devkit:production\"","symbol":"build builder","correct":"// Configure in angular.json: \"builder\": \"ngc-esbuild-devkit:build\""},{"note":"The serve builder handles development server with live reload.","wrong":"\"builder\": \"ngc-esbuild-devkit:dev\"","symbol":"serve builder","correct":"// Configure in angular.json: \"builder\": \"ngc-esbuild-devkit:serve\""},{"note":"The test builder uses Jasmine/Karma compatible test runner.","wrong":"\"builder\": \"ngc-esbuild-devkit:testing\"","symbol":"test builder","correct":"// Configure in angular.json: \"builder\": \"ngc-esbuild-devkit:test\""}],"quickstart":{"code":"// angular.json builder configuration\n{\n  \"projects\": {\n    \"my-app\": {\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"ngc-esbuild-devkit:build\",\n          \"options\": {\n            \"main\": \"src/main.ts\",\n            \"polyfills\": [\"zone.js\"],\n            \"tsConfig\": \"tsconfig.app.json\",\n            \"assets\": [\"src/favicon.ico\", \"src/assets\"],\n            \"styles\": [\"src/styles.css\"],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"production\": {\n              \"budgets\": [\n                { \"type\": \"initial\", \"maximumWarning\": \"500kb\", \"maximumError\": \"1mb\" }\n              ],\n              \"outputHashing\": \"all\"\n            }\n          }\n        },\n        \"serve\": {\n          \"builder\": \"ngc-esbuild-devkit:serve\",\n          \"options\": {\n            \"browserTarget\": \"my-app:build\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"browserTarget\": \"my-app:build:production\"\n            }\n          }\n        },\n        \"test\": {\n          \"builder\": \"ngc-esbuild-devkit:test\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"tsConfig\": \"tsconfig.spec.json\",\n            \"karmaConfig\": \"karma.conf.js\"\n          }\n        }\n      }\n    }\n  }\n}","lang":"javascript","description":"Shows how to configure Angular CLI builders for build, serve, and test using ngc-esbuild-devkit in angular.json."},"warnings":[{"fix":"Pin exact version in package.json and review changelog before updating.","message":"The package is early-stage (v0.0.51); expect breaking changes in minor versions before 1.0.0.","severity":"gotcha","affected_versions":"<1.0.0"},{"fix":"Ensure @angular/core >=16 is used.","message":"Only compatible with Angular CLI projects using Angular 16+. Does not support older Angular versions.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Remove any custom-webpack builder references and use native esbuild options.","message":"Replaces default Webpack-based builders; custom Webpack configs in angular.json (e.g., via @angular-builders/custom-webpack) are not supported.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Test production builds thoroughly; adjust asset references if needed.","message":"Build output may differ from default Angular builder due to esbuild's bundling; verify asset paths and lazy loading.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Monitor the repository for updates and consider alternatives like @angular/build (experimental).","message":"The package is not officially supported by the Angular team; community-driven project.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install ngc-esbuild-devkit --save-dev'.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'ngc-esbuild-devkit'"},{"fix":"Ensure angular.json uses exactly \"ngc-esbuild-devkit:build\" (not \"ngc-esbuild-devkit:production\" or \"ngc-esbuild:build\").","cause":"Builder name misconfiguration in angular.json.","error":"An unhandled exception occurred: Builder ngc-esbuild-devkit:build not found"},{"fix":"Add an 'options' object in the builder config with at least 'main' and 'tsConfig'.","cause":"Missing 'options' block in builder configuration.","error":"TypeError: Cannot read properties of undefined (reading 'options')"},{"fix":"Add \"browserTarget\": \"your-project-name:build\" in serve options.","cause":"Missing browserTarget in serve configuration.","error":"ERROR: builder 'ngc-esbuild-devkit:serve' requires 'browserTarget' option."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}