Plugin Configuration

Core webpack plugin for Angular AOT/JIT compilation with comprehensive configuration options for TypeScript integration and Angular-specific build requirements.

Capabilities

AngularWebpackPlugin

Main webpack plugin class that integrates Angular compilation into the webpack build process.

/**
 * Angular webpack plugin for AOT/JIT compilation
 * Integrates Angular compiler with webpack build process
 */
class AngularWebpackPlugin {
  constructor(options: AngularWebpackPluginOptions);
  apply(compiler: Compiler): void;
}

Usage Example:

import { AngularWebpackPlugin } from '@ngtools/webpack';

const plugin = new AngularWebpackPlugin({
  tsconfig: './tsconfig.json',
  jitMode: false,
  directTemplateLoading: true,
  fileReplacements: {
    './src/environments/environment.ts': './src/environments/environment.prod.ts'
  },
  substitutions: {
    'process.env.NODE_ENV': '"production"'
  }
});

AngularWebpackPluginOptions

Configuration interface for the AngularWebpackPlugin with comprehensive options for TypeScript and Angular compilation settings.

/**
 * Configuration options for AngularWebpackPlugin
 * Controls Angular compilation behavior and TypeScript integration
 */
interface AngularWebpackPluginOptions {
  /** Path to the application's TypeScript configuration file */
  tsconfig: string;
  /** Overrides options in the TypeScript configuration file */
  compilerOptions?: CompilerOptions;
  /** Allows replacing TypeScript files with other TypeScript files in the build */
  fileReplacements: Record<string, string>;
  /** String substitutions to apply during compilation */
  substitutions: Record<string, string>;
  /** Causes plugin to load component templates directly from filesystem */
  directTemplateLoading: boolean;
  /** Enables emission of class metadata for Angular components */
  emitClassMetadata: boolean;
  /** Enables emission of NgModule scope information */
  emitNgModuleScope: boolean;
  /** Enables emission of class debug information */
  emitSetClassDebugInfo?: boolean;
  /** Enables JIT compilation mode instead of AOT */
  jitMode: boolean;
  /** File extension for processing inline component styles */
  inlineStyleFileExtension?: string;
}

Configuration Options Details

tsconfig

• Type: string
• Default: "tsconfig.json"
• Description: Path to the application's TypeScript configuration file. Relative paths are resolved from the webpack compilation context.

compilerOptions

• Type: CompilerOptions (optional)
• Default: undefined
• Description: Overrides options in the application's TypeScript configuration file. These options take precedence over those in tsconfig.json.

fileReplacements

• Type: Record<string, string>
• Default: {}
• Description: Allows replacing TypeScript files with other TypeScript files in the build. Useful for environment-specific configurations.

Example:

fileReplacements: {
  './src/environments/environment.ts': './src/environments/environment.prod.ts',
  './src/config/dev.ts': './src/config/prod.ts'
}

substitutions

• Type: Record<string, string>
• Default: {}
• Description: String substitutions to apply during compilation. Useful for build-time constants.

Example:

substitutions: {
  'process.env.NODE_ENV': '"production"',
  'BUILD_VERSION': '"1.2.3"'
}

directTemplateLoading

• Type: boolean
• Default: true
• Description: When enabled, the plugin loads component templates (HTML) directly from the filesystem. More efficient when only using raw-loader for templates.

emitClassMetadata

• Type: boolean
• Default: Varies based on build mode
• Description: Controls whether class metadata is emitted for Angular components and services.

emitNgModuleScope

• Type: boolean
• Default: Varies based on build mode
• Description: Controls whether NgModule scope information is emitted.

emitSetClassDebugInfo

• Type: boolean (optional)
• Default: undefined
• Description: Controls whether class debug information is emitted for debugging purposes.

jitMode

• Type: boolean
• Default: false
• Description: Enables JIT (Just-in-Time) compilation mode. When enabled, templates and styles are processed for runtime compilation rather than AOT.

inlineStyleFileExtension

• Type: string (optional)
• Default: undefined
• Description: When set, inline component styles will be processed by webpack as files with the provided extension.

Example:

inlineStyleFileExtension: 'scss'

Image Domains Collection

Global collection of image domains discovered during Angular application compilation.

/**
 * Set of image domains discovered during compilation
 * Populated automatically by Angular compilation process
 */
const imageDomains: Set<string>;

Usage Example:

import { imageDomains } from '@ngtools/webpack';

// After compilation, check discovered domains
console.log('Discovered image domains:', Array.from(imageDomains));

Plugin Symbol

Unique symbol used for plugin identification and communication between plugin and loader.

/**
 * Unique symbol for Angular webpack plugin identification
 * Used for internal communication between plugin and loader
 */
const AngularPluginSymbol: unique symbol;