Library Watch Mode Builder

Create a custom Angular Architect builder that implements watch mode for building an Angular library with automatic file change detection and incremental rebuilds.

Overview

You need to build a system that monitors a library project and automatically rebuilds it whenever source files change. The builder should integrate with the Angular CLI's Architect build system and support continuous development workflows.

Requirements

Builder Configuration

Create a builder that accepts the following configuration options:

• A required project path pointing to the library's configuration file
• An optional tsConfig path for TypeScript configuration overrides
• A required watch boolean flag to enable/disable watch mode
• An optional poll number (in milliseconds) for file watching in environments where native file watchers don't work reliably

Watch Mode Behavior

When watch mode is enabled, the builder should:

1. Start monitoring the library source files for changes
2. Trigger an automatic rebuild whenever files are modified
3. Continue running and watching for subsequent changes
4. Support proper cleanup when the build process is stopped
5. Return build results through an Observable stream for each rebuild cycle

Build Output

Each build cycle (initial and subsequent) should:

• Return a success indicator when the build completes successfully
• Include an error message if the build fails
• Support streaming multiple build results over time in watch mode

Implementation

@generates

API

import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
import { Observable } from 'rxjs';

/**
 * Configuration options for the watch mode builder
 */
export interface WatchBuilderOptions {
  /** Path to the library configuration file (required) */
  project: string;

  /** Path to TypeScript configuration (optional) */
  tsConfig?: string;

  /** Enable watch mode for automatic rebuilds (required) */
  watch: boolean;

  /** File watching poll interval in milliseconds (optional) */
  poll?: number;
}

/**
 * Executes the watch mode builder
 *
 * @param options - Builder configuration options
 * @param context - Angular Architect builder context
 * @returns Observable stream of build results
 */
export function execute(
  options: WatchBuilderOptions,
  context: BuilderContext
): Observable<BuilderOutput>;

Test Cases

Basic Watch Mode Activation

• When watch is true and files are modified, the builder automatically triggers a rebuild and returns multiple build results. @test

One-Shot Build Mode

• When watch is false, the builder performs a single build and completes without monitoring for file changes. @test

File Change Detection

• When source files are modified during watch mode, the builder detects the changes within a reasonable time window and starts a new build cycle. @test

Dependencies { .dependencies }

@angular-devkit/build-ng-packagr { .dependency }

Provides Angular Build Architect builder for ng-packagr library packaging with watch mode support.

@satisfied-by