The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Angular CLI builders are task handlers that Angular’s Architect system runs for targets such as building, testing, or serving a project. To create a custom builder, package a handler with a JSON options schema and a builders.json manifest, then register it as a target in angular.json. Run that target with ng run project:target[:configuration].
How Angular CLI builders work
Angular’s CLI Builder API lets developers change CLI behavior by using builders to execute custom logic. A builder is the task-specific handler; Architect is the system that resolves and schedules the task.
As an Amazon Associate I earn from qualifying purchases.
The handler receives an options object and a BuilderContext. The context can provide runtime information and let the handler schedule other targets. A handler can return a result synchronously, return a Promise, or return an Observable when it needs to emit repeated results. The result is a BuilderOutput, which includes a success flag and may include an error.
Recommended Free Tools
Build a custom builder package
A builder package needs an implementation, a schema describing accepted options, a manifest connecting the builder name to those files, and package metadata that points to the manifest. Angular’s guide demonstrates this structure and the createBuilder() API from @angular-devkit/architect.
#1 Best Overall
src/my-builder.ts: implementation of the handler.src/schema.json: JSON schema for the handler’s options.builders.json: maps a builder name to the implementation and schema.package.json: includes thebuildersfield pointing to the manifest, along with package dependencies.
The guide’s example also includes TypeScript configuration and a test file. A package can be published to npm so a workspace can use it as a dependency.
In the guide’s illustrative identifier @example/copy-file:copy, @example/copy-file is the package name and copy is the builder name. The example handler uses createBuilder() and returns a Promise<BuilderOutput>.
Register and run the builder
A project’s angular.json file defines targets in its architect section. Each target names a builder in package-name:builder-name form and can specify default options and named configurations. Option names in the JSON file use camelCase; command-line flags use dash-case. See Angular’s workspace configuration reference.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →For example, the builder guide shows a copy-package target configured to use @example/copy-file:copy, with source and destination defaults. The target can be run directly:
ng run builder-test:copy-packageA CLI argument can override a configured value; in the guide’s example, --destination=package-other.json replaces the target’s destination option. The general syntax is:
ng run project:target[:configuration]Angular’s CLI reference documents the command. Use the project name and target as they appear in the workspace configuration; add a configuration name after the target when you want to select one.
Rank #3
How target options are resolved and validated
When Architect schedules a target, it combines inputs in this order:
- Start with the target’s default
options. - Overlay the selected named
configuration, if one was specified. - Apply scheduling overrides, such as options passed on the CLI.
Architect checks the resolved options against the builder’s JSON schema before execution. This makes the schema part of the builder’s runtime contract: option names, types, and accepted values need to match what the handler expects.
There are two scheduling approaches with different resolution behavior. scheduleTarget() resolves a workspace target and its configuration. scheduleBuilder() receives an options object directly and validates it, but does not resolve target configuration. Choose based on whether the task should inherit a workspace target’s configured defaults.
Test and clean up builder execution
Angular recommends integration tests through Architect’s scheduler so tests exercise the builder in an Architect context. Unit tests are also useful for checking the task logic itself. If a builder returns an Observable, put cleanup in the Observable’s teardown logic so resources are released when execution ends or is unsubscribed. The builder guide covers the API and testing approach.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check built-in builders before changing a build target
Do not assume every project uses the same build builder. Angular’s current build guide lists these common build-target builders:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
| Builder | Use | Bundler or build behavior |
|---|---|---|
@angular/build:application |
Application | Builds an application bundle and server, and supports build-time prerendered routes using esbuild. |
@angular-devkit/build-angular:browser-esbuild |
Browser bundle | Uses esbuild. |
@angular-devkit/build-angular:browser |
Browser bundle | Uses webpack. |
@angular/build:ng-packagr |
Angular Package Format library | Builds a library. |
The guide says generated applications use @angular/build:application by default, while generated libraries use @angular/build:ng-packagr. These defaults are not a substitute for inspecting your workspace: check the actual build target in angular.json. Builder names and defaults can vary with the Angular CLI release and project type.
Plan a builder change or migration
Before replacing a build builder, compare its output and project fit, its bundler, supported options, compatibility with the Angular version in use, and the builder’s migration documentation. An application builder and a library builder serve different outputs; a bundler change can also affect which options and workflows are supported.
There is no single migration recipe for every custom builder. Angular’s build-system migration guidance directs users of custom builders to the builder’s own documentation. Check that package’s compatibility notes and supported options against your current Angular version and target configuration before migrating.
If a target’s behavior depends on environment-specific values, review Angular’s build environments guide as well as the target’s named configurations. That helps distinguish environment configuration from builder behavior when diagnosing a build.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
