or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-builders.mddevelopment-server.mdindex.mdlibrary-packaging.mdserver-side-rendering.mdtesting-builders.mdtesting-utilities.md
tile.json

index.mddocs/

Angular DevKit Build Angular

Angular DevKit Build Angular is a comprehensive build system facade that provides Architect builders for building and testing Angular applications and libraries. It serves as the primary build toolchain for Angular CLI, offering multiple builders for different targets including browser, server, testing, and library packaging.

Package Information

  • Package Name: @angular-devkit/build-angular
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular-devkit/build-angular

Core Imports

import {
  executeBrowserBuilder,
  executeDevServerBuilder,
  executeKarmaBuilder,
  type BrowserBuilderOptions,
  type DevServerBuilderOptions,
  type KarmaBuilderOptions
} from "@angular-devkit/build-angular";

For CommonJS:

const {
  executeBrowserBuilder,
  executeDevServerBuilder,
  executeKarmaBuilder
} = require("@angular-devkit/build-angular");

Basic Usage

import { executeBrowserBuilder, type BrowserBuilderOptions } from "@angular-devkit/build-angular";
import { BuilderContext } from "@angular-devkit/architect";

// Configure browser build options
const options: BrowserBuilderOptions = {
  outputPath: "dist/my-app",
  index: "src/index.html",
  main: "src/main.ts",
  polyfills: ["zone.js"],
  tsConfig: "tsconfig.app.json",
  assets: ["src/favicon.ico", "src/assets"],
  styles: ["src/styles.css"],
  scripts: []
};

// Execute browser build
const buildResult = await executeBrowserBuilder(options, context).toPromise();

Architecture

Angular DevKit Build Angular is built around several key components:

  • Builder System: Integration with Angular Architect for executing build tasks
  • Webpack Integration: Primary build engine using Webpack with custom configurations
  • esbuild Support: Modern fast build support via @angular/build integration
  • Multi-Target Support: Separate builders for browser, server, testing, and development
  • Configuration System: JSON schema-based configuration with TypeScript type definitions
  • Transform System: Pluggable transformation pipeline for webpack configs and outputs

Capabilities

Application Builders

Core builders for building Angular applications for different environments and targets.

function executeBrowserBuilder(
  options: BrowserBuilderOptions,
  context: BuilderContext,
  transforms?: {
    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
    logging?: WebpackLoggingCallback;
    indexHtml?: IndexHtmlTransform;
  }
): Observable<BrowserBuilderOutput>;

interface BrowserBuilderOutput extends BuilderOutput {
  stats: BuildEventStats;
  baseOutputPath: string;
  outputs: {
    locale?: string;
    path: string;
    baseHref?: string;
  }[];
}

Application Builders

Development Server

Development server with live reloading and hot module replacement for Angular applications.

function executeDevServerBuilder(
  options: DevServerBuilderOptions,
  context: BuilderContext
): Observable<DevServerBuilderOutput>;

interface DevServerBuilderOptions {
  buildTarget: string;
  port?: number;
  host?: string;
  proxyConfig?: string;
  ssl?: boolean;
  sslKey?: string;
  sslCert?: string;
  open?: boolean;
  liveReload?: boolean;
  publicHost?: string;
  disableHostCheck?: boolean;
  servePath?: string;
  headers?: Record<string, string>;
}

Development Server

Testing Builders

Testing infrastructure supporting multiple test runners including Karma, Jest, and Web Test Runner.

function executeKarmaBuilder(
  options: KarmaBuilderOptions,
  context: BuilderContext,
  transforms?: {
    webpackConfiguration?: ExecutionTransformer<Configuration>;
    karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions;
  }
): Observable<BuilderOutput>;

interface KarmaBuilderOptions {
  main: string;
  tsConfig: string;
  karmaConfig?: string;
  polyfills?: string | string[];
  assets?: AssetPattern[];
  styles?: (string | StyleElement)[];
  scripts?: (string | ScriptElement)[];
  watch?: boolean;
  browsers?: string | false;
  codeCoverage?: boolean;
  codeCoverageExclude?: string[];
  fileReplacements?: FileReplacement[];
  reporters?: string[];
  include?: string | string[];
}

interface JestBuilderOptions {
  tsConfig: string;
  include?: string[];
  exclude?: string[];
  polyfills?: string[];
  aot?: boolean;
}

interface WebTestRunnerBuilderOptions {
  tsConfig: string;
  main?: string;
  polyfills?: string | string[];
  assets?: AssetPattern[];
  styles?: (string | StyleElement)[];
  scripts?: (string | ScriptElement)[];
  include?: string[];
  exclude?: string[];
  sourceMap?: boolean | SourceMapOptions;
  progress?: boolean;
  watch?: boolean;
  poll?: number;
  browsers?: string;
  codeCoverage?: boolean;
  codeCoverageExclude?: string[];
  fileReplacements?: FileReplacement[];
  aot?: boolean;
}

Testing Builders

Server Side Rendering

Builders for Angular Universal server-side rendering and static site generation.

function executeServerBuilder(
  options: ServerBuilderOptions,
  context: BuilderContext,
  transforms?: {
    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
  }
): Observable<ServerBuilderOutput>;

function execute as executePrerenderBuilder(
  options: PrerenderBuilderOptions,
  context: BuilderContext
): Promise<BuilderOutput>;

interface ServerBuilderOutput extends BuilderOutput {
  baseOutputPath: string;
  outputPath: string;
  outputs: {
    locale?: string;
    path: string;
  }[];
}

interface PrerenderBuilderOptions {
  browserTarget: string;
  serverTarget: string;
  routes?: string[];
  routesFile?: string;
  discoverRoutes?: boolean;
}

Server Side Rendering

Library Packaging

Library builders for creating distributable Angular libraries.

function executeNgPackagrBuilder(
  options: NgPackagrBuilderOptions,
  context: BuilderContext
): Observable<BuilderOutput>;

function executeExtractI18nBuilder(
  options: ExtractI18nBuilderOptions,
  context: BuilderContext
): Observable<BuilderOutput>;

Library Packaging

Core Types

type ExecutionTransformer<T> = (input: T) => T | Promise<T>;

interface AssetPattern {
  input: string;
  output?: string;
  glob: string;
  ignore?: string[];
}

interface FileReplacement {
  src: string;
  replaceWith: string;
}

interface Budget {
  type: 'bundle' | 'initial' | 'allScript' | 'all' | 'anyComponentStyle' | 'any';
  name?: string;
  baseline?: string;
  maximumWarning?: string;
  maximumError?: string;
  minimumWarning?: string;
  minimumError?: string;
  warning?: string;
  error?: string;
}

enum CrossOrigin {
  None = 'none',
  Anonymous = 'anonymous',
  UseCredentials = 'use-credentials'
}

enum OutputHashing {
  None = 'none',
  All = 'all',
  Media = 'media',
  Bundles = 'bundles'
}

interface StyleElement {
  input: string;
  bundleName?: string;
  inject?: boolean;
}

interface ScriptElement {
  input: string;
  bundleName?: string;
  inject?: boolean;
}

Testing Utilities

// Re-exported from @angular-devkit/architect/testing
// Complete testing utilities for unit testing builders

Testing Utilities