CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ngtools--webpack

Webpack plugin that AoT compiles your Angular components and modules.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

typescript-compilation.mddocs/

TypeScript Compilation

Advanced TypeScript compilation system with host augmentation for Angular-specific requirements including dependency collection, resource loading, and file replacements.

Capabilities

Host Augmentation for Resources

Augments TypeScript compiler host with resource loading capabilities for Angular templates and stylesheets.

/**
 * Augments TypeScript compiler host with resource loading capabilities
 * Enables loading of Angular component templates and stylesheets
 * @param host - Base TypeScript compiler host
 * @param resourceLoader - Webpack resource loader instance
 * @param options - Resource loading options
 */
function augmentHostWithResources(
  host: ts.CompilerHost,
  resourceLoader: WebpackResourceLoader,
  options?: {
    directTemplateLoading?: boolean;
    inlineStyleFileExtension?: string;
  }
): void;

Host Augmentation for Dependency Collection

Augments compiler host to collect and track file dependencies during compilation.

/**
 * Augments host to collect dependencies during compilation
 * Tracks file dependencies for webpack's dependency graph
 * @param host - Base TypeScript compiler host
 * @param dependencies - Map storing file dependencies
 * @param moduleResolutionCache - Optional cache for resolved modules
 */
function augmentHostWithDependencyCollection(
  host: ts.CompilerHost,
  dependencies: Map<string, Set<string>>,
  moduleResolutionCache?: ts.ModuleResolutionCache
): void;

Host Augmentation for File Replacements

Augments compiler host with file replacement capabilities for environment-specific builds.

/**
 * Augments host with file replacement capabilities
 * Enables swapping files during compilation (e.g., environment configs)
 * @param host - Base TypeScript compiler host
 * @param replacements - Map of file paths to replacement paths
 * @param moduleResolutionCache - Optional cache for resolved modules
 */
function augmentHostWithReplacements(
  host: ts.CompilerHost,
  replacements: Record<string, string>,
  moduleResolutionCache?: ts.ModuleResolutionCache
): void;

Host Augmentation for String Substitutions

Augments compiler host with string substitution capabilities for build-time constants.

/**
 * Augments host with string substitution capabilities
 * Enables replacing string literals during compilation
 * @param host - Base TypeScript compiler host
 * @param substitutions - Map of strings to replacement values
 */
function augmentHostWithSubstitutions(
  host: ts.CompilerHost,
  substitutions: Record<string, string>
): void;

Program Versioning Augmentation

Adds versioning support to TypeScript programs for incremental compilation.

/**
 * Adds versioning support to TypeScript programs
 * Enables incremental compilation and change detection
 * @param program - TypeScript program to augment
 */
function augmentProgramWithVersioning(program: ts.Program): void;

Host Augmentation for Caching

Augments compiler host with caching capabilities for improved build performance.

/**
 * Augments host with caching capabilities
 * Improves compilation performance through source file caching
 * @param host - Base TypeScript compiler host
 * @param cache - Source file cache map
 */
function augmentHostWithCaching(
  host: ts.CompilerHost,
  cache: Map<string, ts.SourceFile>
): void;

Source File Cache

Cache system for TypeScript source files to improve compilation performance.

/**
 * Cache for TypeScript source files
 * Extends Map with additional caching functionality for Angular diagnostics
 */
class SourceFileCache extends Map<string, ts.SourceFile> {
  /**
   * Invalidates cached entries for a specific file
   * @param file - Path of file to invalidate
   */
  invalidate(file: string): void;
  
  /**
   * Updates Angular diagnostics for a source file
   * @param sourceFile - TypeScript source file
   * @param diagnostics - Array of diagnostics to store
   */
  updateAngularDiagnostics(sourceFile: ts.SourceFile, diagnostics: ts.Diagnostic[]): void;
  
  /**
   * Gets Angular diagnostics for a source file
   * @param sourceFile - TypeScript source file
   * @returns Array of diagnostics or undefined
   */
  getAngularDiagnostics(sourceFile: ts.SourceFile): ts.Diagnostic[] | undefined;
}

Webpack System Integration

Creates TypeScript system from webpack's file system for seamless integration.

/**
 * Type for webpack input file system
 * Represents webpack's file system interface
 */
type InputFileSystem = NonNullable<Compiler['inputFileSystem']>;

/**
 * Synchronous file system interface
 * Extends webpack's file system with synchronous operations
 */
interface InputFileSystemSync extends InputFileSystem {
  /** Synchronously get file statistics */
  statSync(path: string): { isFile(): boolean; isDirectory(): boolean };
  /** Synchronously read file content */
  readFileSync(path: string, encoding?: string): string | Buffer;
}

/**
 * Creates TypeScript system from webpack file system
 * Bridges webpack's file system with TypeScript compiler
 * @param inputFileSystem - Webpack input file system
 * @param currentDirectory - Current working directory
 * @returns TypeScript system interface
 */
function createWebpackSystem(
  inputFileSystem: InputFileSystemSync,
  currentDirectory: string
): ts.System;

Diagnostics Integration

System for handling and reporting TypeScript and Angular compilation diagnostics.

/**
 * Function type for reporting diagnostics
 * Handles TypeScript and Angular compilation diagnostics
 */
type DiagnosticsReporter = (diagnostics: readonly Diagnostic[]) => void;

/**
 * Creates a diagnostics reporter for webpack compilations
 * Integrates TypeScript diagnostics with webpack's error reporting
 * @param compilation - Webpack compilation instance
 * @param sourceFileToUrl - Function to convert file paths to URLs
 * @returns Diagnostics reporter function
 */
function createDiagnosticsReporter(
  compilation: Compilation,
  sourceFileToUrl?: (sourceFile: string) => string
): DiagnosticsReporter;

/**
 * Adds warning message to webpack compilation
 * @param compilation - Webpack compilation instance
 * @param message - Warning message to add
 */
function addWarning(compilation: Compilation, message: string): void;

/**
 * Adds error message to webpack compilation
 * @param compilation - Webpack compilation instance
 * @param message - Error message to add
 */
function addError(compilation: Compilation, message: string): void;

Path Utilities

Cross-platform path normalization and externalization utilities.

/**
 * Normalizes file paths for cross-platform compatibility
 * Converts paths to use forward slashes consistently
 * @param path - File path to normalize
 * @returns Normalized path string
 */
function normalizePath(path: string): string;

/**
 * Externalizes paths for different operating systems
 * Handles platform-specific path requirements
 */
const externalizePath: (path: string) => string;

Complete Integration Example

Example showing how all host augmentations work together:

import {
  augmentHostWithResources,
  augmentHostWithDependencyCollection,
  augmentHostWithReplacements,
  augmentHostWithSubstitutions,
  augmentHostWithCaching,
  SourceFileCache,
  WebpackResourceLoader
} from '@ngtools/webpack';

// Create base TypeScript compiler host
const baseHost = ts.createCompilerHost(compilerOptions);

// Create resource loader and cache
const resourceLoader = new WebpackResourceLoader();
const cache = new SourceFileCache();
const dependencies = new Map<string, Set<string>>();
const moduleResolutionCache = new Map<string, ts.ResolvedModule>();

// Apply all augmentations
let augmentedHost = augmentHostWithResources(baseHost, resourceLoader, options);
augmentedHost = augmentHostWithDependencyCollection(augmentedHost, dependencies, moduleResolutionCache);
augmentedHost = augmentHostWithReplacements(augmentedHost, fileReplacements, moduleResolutionCache);
augmentedHost = augmentHostWithSubstitutions(augmentedHost, substitutions);
augmentedHost = augmentHostWithCaching(augmentedHost, cache);

// Use augmented host for Angular compilation
const program = ts.createProgram(fileNames, compilerOptions, augmentedHost);

docs

code-transformations.md

index.md

plugin-configuration.md

resource-management.md

typescript-compilation.md

webpack-loader.md

tile.json