Application Builders

/**
 * Execute browser builder to create optimized application bundles
 * @param options - Browser build configuration options
 * @param context - Angular Architect builder context
 * @param transforms - Optional transformation hooks
 * @returns Observable with build results and statistics
 */
function executeBrowserBuilder(
  options: BrowserBuilderOptions,
  context: BuilderContext,
  transforms?: {
    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
    logging?: WebpackLoggingCallback;
    indexHtml?: IndexHtmlTransform;
  }
): Observable<BrowserBuilderOutput>;

interface BrowserBuilderOptions {
  /** Output directory for build artifacts */
  outputPath: string;
  /** Path to index.html template */
  index?: string;
  /** Main TypeScript entry point */
  main: string;
  /** Polyfills to include in build */
  polyfills?: string | string[];
  /** TypeScript configuration file */
  tsConfig: string;
  /** Static assets to copy */
  assets?: AssetPattern[];
  /** Global stylesheets */
  styles?: (string | StyleElement)[];
  /** Global scripts */
  scripts?: (string | ScriptElement)[];
  /** Enable source maps */
  sourceMap?: boolean | SourceMapOptions;
  /** Optimization configuration */
  optimization?: boolean | OptimizationOptions;
  /** Enable AOT compilation */
  aot?: boolean;
  /** Build budgets for size warnings/errors */
  budgets?: Budget[];
  /** File replacements for different environments */
  fileReplacements?: FileReplacement[];
  /** Output hashing strategy */
  outputHashing?: OutputHashing;
  /** Delete output directory before build */
  deleteOutputPath?: boolean;
  /** Enable service worker */
  serviceWorker?: boolean;
  /** Service worker configuration file */
  ngswConfigPath?: string;
  /** Base href for the application */
  baseHref?: string;
  /** Deploy URL for resources */
  deployUrl?: string;
  /** Enable verbose logging */
  verbose?: boolean;
  /** Enable progress reporting */
  progress?: boolean;
  /** Internationalization configuration */
  i18nMissingTranslation?: 'warning' | 'error' | 'ignore';
  /** Watch mode for development */
  watch?: boolean;
  /** Cross-origin attribute for scripts */
  crossOrigin?: CrossOrigin;
  /** Enable subresource integrity */
  subresourceIntegrity?: boolean;
}

interface BrowserBuilderOutput extends BuilderOutput {
  /** Build statistics and metrics */
  stats: BuildEventStats;
  /** Base output directory path */
  baseOutputPath: string;
  /** Output locations for different locales */
  outputs: {
    locale?: string;
    path: string;
    baseHref?: string;
  }[];
}

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

// Basic production build
const prodOptions: 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: [],
  optimization: true,
  outputHashing: OutputHashing.All,
  sourceMap: false,
  aot: true,
  budgets: [
    {
      type: "initial",
      maximumWarning: "2mb",
      maximumError: "5mb"
    }
  ]
};

// Execute build with custom webpack transform
const buildResult = await executeBrowserBuilder(prodOptions, context, {
  webpackConfiguration: (config) => {
    // Customize webpack configuration
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve('src')
    };
    return config;
  }
}).toPromise();

/**
 * Build browser application using esbuild with webpack-compatible options
 * @param userOptions - Browser builder options (webpack-compatible)
 * @param context - Builder context
 * @param infrastructureSettings - Optional infrastructure settings
 * @param plugins - Optional esbuild plugins
 * @returns Async iterable with build results
 */
function buildEsbuildBrowser(
  userOptions: BrowserBuilderOptions,
  context: BuilderContext,
  infrastructureSettings?: {
    write?: boolean;
  },
  plugins?: Plugin[]
): AsyncIterable<BuilderOutput>;

function convertBrowserOptions(
  options: BrowserBuilderOptions
): ApplicationBuilderOptions;

import { buildEsbuildBrowser } from "@angular-devkit/build-angular";

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

// Execute esbuild browser build
for await (const result of buildEsbuildBrowser(options, context)) {
  if (result.success) {
    console.log('Build successful!');
  }
}

/**
 * Build application using esbuild-based builder from @angular/build
 * @param options - Application builder options
 * @returns Build result promise
 */
function buildApplication(options: ApplicationBuilderOptions): Promise<void>;

interface ApplicationBuilderOptions {
  /** Output directory for build artifacts */
  outputPath: string;
  /** Path to index.html template */
  index: string;
  /** Main TypeScript entry point */
  browser: string;
  /** Server entry point for SSR */
  server?: string;
  /** Service worker entry point */
  serviceWorker?: string;
  /** Polyfills to include */
  polyfills?: string[];
  /** TypeScript configuration */
  tsConfig: string;
  /** Static assets */
  assets?: AssetPattern[];
  /** Global styles */
  styles?: (string | StyleElement)[];
  /** Global scripts */
  scripts?: (string | ScriptElement)[];
  /** Enable development mode */
  development?: boolean;
  /** Production optimizations */
  optimization?: boolean | OptimizationOptions;
  /** Source map generation */
  sourceMap?: boolean | SourceMapOptions;
}

/**
 * Build app shell combining server and browser builds
 * Generates static index.html with app shell content
 */
interface AppShellBuilderOptions {
  /** Browser target to build */
  browserTarget: string;
  /** Server target to build */
  serverTarget: string;
  /** Route to render for app shell */
  route?: string;
  /** Output index file name */
  inputIndexPath?: string;
  /** Output directory */
  outputIndexPath?: string;
}

interface OptimizationOptions {
  /** Optimize scripts */
  scripts?: boolean;
  /** Optimize styles */
  styles?: boolean;
  /** Enable tree shaking */
  fonts?: boolean;
}

interface SourceMapOptions {
  /** Generate scripts source maps */
  scripts?: boolean;
  /** Generate styles source maps */
  styles?: boolean;
  /** Source map type */
  vendor?: boolean;
  /** Hidden source maps */
  hidden?: boolean;
}

interface BuildEventStats {
  /** Bundle size information */
  chunks?: any[];
  /** Assets information */
  assets?: any[];
  /** Compilation errors */
  errors?: string[];
  /** Compilation warnings */
  warnings?: string[];
  /** Build hash */
  hash?: string;
  /** Build time */
  time?: number;
}