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

@ngtools/webpack

@ngtools/webpack is a Webpack 5.x plugin for Angular's Ahead-of-Time (AOT) compiler. It provides both webpack plugin and loader functionality for compiling Angular applications and components, supporting both AOT and JIT compilation modes with seamless TypeScript integration.

Package Information

  • Package Name: @ngtools/webpack
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ngtools/webpack

Core Imports

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

For additional utilities:

import { 
  AngularWebpackPlugin, 
  AngularWebpackPluginOptions,
  AngularWebpackLoaderPath,
  imageDomains 
} from '@ngtools/webpack';

Basic Usage

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

// Webpack configuration
export default {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: '@ngtools/webpack',
      },
    ],
  },
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.json',
      jitMode: false,
      directTemplateLoading: true,
    }),
  ],
};

Architecture

@ngtools/webpack is built around several key components:

  • Webpack Plugin: AngularWebpackPlugin class that integrates with webpack's compilation lifecycle
  • Webpack Loader: Angular-specific loader that processes TypeScript files with Angular compilation
  • Compilation System: Angular AOT/JIT compiler integration with TypeScript host augmentation
  • Resource Processing: Template and stylesheet loading with webpack integration
  • Transformation Pipeline: TypeScript transformers for Angular-specific code modifications
  • Caching Layer: Source file caching and dependency tracking for efficient builds

Capabilities

Plugin Configuration

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

class AngularWebpackPlugin {
  constructor(options: AngularWebpackPluginOptions);
}

interface AngularWebpackPluginOptions {
  tsconfig: string;
  compilerOptions?: CompilerOptions;
  fileReplacements: Record<string, string>;
  substitutions: Record<string, string>;
  directTemplateLoading: boolean;
  emitClassMetadata: boolean;
  emitNgModuleScope: boolean;
  emitSetClassDebugInfo?: boolean;
  jitMode: boolean;
  inlineStyleFileExtension?: string;
}

Plugin Configuration

Webpack Loader Integration

Webpack loader system for processing Angular TypeScript files with Angular compiler integration and resource handling.

function angularWebpackLoader(
  this: LoaderContext<unknown>,
  content: string,
  map: string
): void;

const AngularWebpackLoaderPath: string;

Webpack Loader

TypeScript Compilation System

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

function augmentHostWithResources(
  host: CompilerHost,
  resourceLoader: WebpackResourceLoader,
  options: AngularWebpackPluginOptions
): CompilerHost;

function augmentHostWithDependencyCollection(
  host: CompilerHost,
  dependencies: Map<string, Set<string>>,
  moduleResolutionCache: Map<string, ts.ResolvedModule>
): CompilerHost;

function augmentHostWithReplacements(
  host: CompilerHost,
  replacements: Record<string, string>,
  moduleResolutionCache: Map<string, ts.ResolvedModule>
): CompilerHost;

TypeScript Compilation

Resource Management

Resource loading system for Angular templates and stylesheets with webpack integration and inline processing capabilities.

class WebpackResourceLoader {
  get(file: string): Promise<string>;
  resolve(url: string, containingFile: string): Promise<string>;
}

const InlineAngularResourceLoaderPath: string;
const InlineAngularResourceSymbol: unique symbol;

Resource Management

Code Transformations

TypeScript transformers for Angular-specific code modifications including resource replacement, import elision, and JIT support removal.

function replaceResources(
  shouldTransform: (fileName: string) => boolean,
  getTypeChecker: () => ts.TypeChecker,
  inlineStyleFileExtension?: string
): ts.TransformerFactory<ts.SourceFile>;

function elideImports(
  sourceFile: ts.SourceFile,
  removedNodes: ts.Node[],
  getTypeChecker: () => ts.TypeChecker,
  compilerOptions: ts.CompilerOptions
): Set<ts.Node>;

Code Transformations

Types

interface EmitFileResult {
  content?: string;
  map?: string;
  dependencies: readonly string[];
  hash?: Uint8Array;
}

type FileEmitter = (file: string) => Promise<EmitFileResult | undefined>;

type DiagnosticsReporter = (diagnostics: readonly Diagnostic[]) => void;

interface InputFileSystemSync extends InputFileSystem {
  readFileSync: NonNullable<InputFileSystem['readFileSync']>;
  statSync: NonNullable<InputFileSystem['statSync']>;
}

const imageDomains: Set<string>;
const AngularPluginSymbol: unique symbol;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ngtools/webpack@20.2.x
Publish Source
CLI
Badge
tessl/npm-ngtools--webpack badge