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

library-packaging.mddocs/

Library Packaging

Builders for creating distributable Angular libraries and extracting internationalization strings.

Capabilities

ng-packagr Builder

Builds Angular libraries using ng-packagr with Angular Package Format (APF) compliance.

/**
 * Execute ng-packagr builder for library packaging
 * @param options - Library build configuration
 * @param context - Builder context
 * @returns Observable with library build results
 */
function executeNgPackagrBuilder(
  options: NgPackagrBuilderOptions,
  context: BuilderContext
): Observable<BuilderOutput>;

interface NgPackagrBuilderOptions {
  /** Path to ng-package.json or package.json */
  project: string;
  /** TypeScript configuration file */
  tsConfig?: string;
  /** Enable watch mode */
  watch?: boolean;
  /** Enable polling for file changes */
  poll?: number;
}

Usage Examples:

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

// Basic library build
const libraryOptions: NgPackagrBuilderOptions = {
  project: "projects/my-lib/ng-package.json",
  tsConfig: "projects/my-lib/tsconfig.lib.json"
};

// Library build with watch mode
const libraryWatchOptions: NgPackagrBuilderOptions = {
  project: "projects/my-lib/ng-package.json", 
  tsConfig: "projects/my-lib/tsconfig.lib.json",
  watch: true,
  poll: 1000
};

// Execute library build
const buildResult = await executeNgPackagrBuilder(libraryOptions, context).toPromise();

Extract i18n Builder

Extracts internationalization strings from Angular applications for translation.

/**
 * Execute i18n extraction for Angular applications
 * @param options - i18n extraction configuration
 * @param context - Builder context
 * @returns Observable with extraction results
 */
function executeExtractI18nBuilder(
  options: ExtractI18nBuilderOptions,
  context: BuilderContext
): Observable<BuilderOutput>;

interface ExtractI18nBuilderOptions {
  /** Browser target to extract from */
  browserTarget: string;
  /** Output format for extracted messages */
  format?: 'xmb' | 'xlf' | 'xlif' | 'xliff' | 'xlf2' | 'xliff2' | 'json' | 'arb';
  /** Progress reporting */
  progress?: boolean;
  /** Output file path */
  outputPath?: string;
  /** Output file name */
  outFile?: string;
  /** Include context information */
  includeContext?: boolean;
}

i18n Extraction Examples:

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

// Extract i18n messages to XLIFF format
const i18nOptions: ExtractI18nBuilderOptions = {
  browserTarget: "my-app:build",
  format: "xlf2",
  outputPath: "src/locale",
  outFile: "messages.xlf",
  includeContext: true,
  progress: true
};

// Execute extraction
const extractResult = await executeExtractI18nBuilder(i18nOptions, context).toPromise();

Library Configuration

/**
 * ng-package.json configuration for Angular libraries
 */
interface NgPackageConfig {
  /** Package root directory */
  $schema?: string;
  /** Library source directory */
  lib: {
    /** Entry point file */
    entryFile: string;
    /** UMD module ID */
    umdModuleIds?: Record<string, string>;
    /** Embedded assets */
    embeddedAssets?: string[];
  };
  /** Build destination */
  dest: string;
  /** Delete destination before build */
  deleteDestPath?: boolean;
  /** Assets to copy */
  assets?: string[];
  /** Allowed non-peer dependencies */
  allowedNonPeerDependencies?: string[];
  /** Keep lifecycle scripts */
  keepLifecycleScripts?: boolean;
}

/**
 * Public API configuration
 */
interface PublicApiConfig {
  /** Main entry point */
  main: string;
  /** Secondary entry points */
  secondaryEntryPoints?: SecondaryEntryPoint[];
  /** Type definitions */
  typings: string;
  /** UMD bundle configuration */
  umd?: {
    /** Module name */
    name: string;
    /** Global dependencies */
    globals?: Record<string, string>;
  };
}

/**
 * Secondary entry point configuration
 */
interface SecondaryEntryPoint {
  /** Entry point name */
  name: string;
  /** Entry file path */
  entryFile: string;
  /** UMD module name */
  umdModuleName?: string;
}

Package Format Types

/**
 * Angular Package Format (APF) structure
 */
interface AngularPackageFormat {
  /** ES2022 bundle with .mjs extension */
  es2022: string;
  /** ES2020 bundle */  
  es2020: string;
  /** ES2015 bundle */
  es2015: string;
  /** UMD bundle for non-module environments */
  umd: string;
  /** Type definitions */
  typings: string;
  /** Package metadata */
  metadata: string;
  /** Bundled metadata for Ivy */
  bundledMetadata?: string;
}

/**
 * Library build artifacts
 */
interface LibraryBuildArtifacts {
  /** Package.json with updated paths */
  packageJson: any;
  /** Generated bundles */
  bundles: {
    format: 'es2022' | 'es2020' | 'es2015' | 'umd';
    file: string;
    sourceMap?: string;
  }[];
  /** Type definition files */
  typings: string[];
  /** Angular metadata files */
  metadata: string[];
  /** Public API file */
  publicApi?: string;
}

i18n Configuration

/**
 * Internationalization extraction configuration
 */
interface I18nExtractionConfig {
  /** Source language */
  sourceLocale: string;
  /** Target locales */
  locales: string[];
  /** Message format */
  format: 'xmb' | 'xlf' | 'xlif' | 'xliff' | 'xlf2' | 'xliff2' | 'json' | 'arb';
  /** Base output path */
  outputPath: string;
  /** Include descriptions */
  includeContext: boolean;
  /** Preserve whitespace */
  preserveWhitespaces?: boolean;
}

/**
 * Translation file structure
 */
interface TranslationFile {
  /** File format */
  format: string;
  /** Source language */
  sourceLanguage: string;
  /** Target language */
  targetLanguage: string;
  /** Translation units */
  units: TranslationUnit[];
}

/**
 * Individual translation unit
 */
interface TranslationUnit {
  /** Unique message ID */
  id: string;
  /** Source text */
  source: string;
  /** Translated text */
  target?: string;
  /** Message description/context */
  description?: string;
  /** Source location */
  locations?: {
    file: string;
    line: number;
    column?: number;
  }[];
  /** Translation state */
  state?: 'new' | 'translated' | 'final';
}

Build Optimization

/**
 * Library optimization configuration
 */
interface LibraryOptimization {
  /** Tree shaking configuration */
  treeshaking: {
    /** Enable tree shaking */
    enabled: boolean;
    /** Pure annotations */
    pureAnnotations: string[];
  };
  /** Bundle minification */
  minification: {
    /** Minify JavaScript */
    scripts: boolean;
    /** Minify CSS */
    styles: boolean;
    /** Keep function names */
    keepNames: boolean;
  };
  /** Dead code elimination */
  deadCodeElimination: boolean;
  /** Side effects configuration */
  sideEffects: boolean | string[];
}