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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Webpack Loader

Name: tessl/npm-ngtools--webpack
Author: tessl

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

Capabilities

Angular Webpack Loader Function

Main webpack loader function that processes TypeScript files through the Angular compiler.

/**
 * Angular webpack loader function for processing TypeScript files
 * Integrates with AngularWebpackPlugin for Angular compilation
 * @param content - Source code content of the file
 * @param map - Source map from previous loaders in the chain
 */
function angularWebpackLoader(
  this: LoaderContext<unknown>,
  content: string,
  map: string
): void;

Usage Example:

// In webpack configuration
export default {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: '@ngtools/webpack',
      },
    ],
  },
};

Loader Path Constant

File path constant for referencing the Angular webpack loader.

/**
 * File path to the Angular webpack loader
 * Use this constant when referencing the loader programmatically
 */
const AngularWebpackLoaderPath: string;

Usage Example:

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

// Use in webpack configuration
export default {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: AngularWebpackLoaderPath,
      },
    ],
  },
};

File Emitter System

System for handling file emission during the Angular compilation process.

/**
 * Result structure for file emission operations
 * Contains file content, source maps, and dependency information
 */
interface EmitFileResult {
  /** File content as string */
  content?: string;
  /** Source map for the emitted file */
  map?: string;
  /** List of file dependencies discovered during emission */
  dependencies: readonly string[];
  /** Hash of the file content for caching */
  hash?: Uint8Array;
}

/**
 * Function type for file emission
 * Processes a file and returns emission result
 */
type FileEmitter = (file: string) => Promise<EmitFileResult | undefined>;

File Emitter Registration

Registration system for managing file emitters during compilation.

/**
 * Registration wrapper for file emitters
 * Manages lifecycle and cleanup of file emission processes
 */
class FileEmitterRegistration {
  /**
   * Updates the emitter function
   * @param emitter - New file emitter function
   */
  update(emitter: FileEmitter): void;
  
  /**
   * Emits a file using the registered emitter
   * @param file - File path to emit
   * @returns Promise resolving to emission result
   */
  emit(file: string): Promise<EmitFileResult | undefined>;
}

File Emitter Collection

Collection manager for multiple file emitters during webpack compilation.

/**
 * Collection manager for file emitters
 * Coordinates multiple emitters during webpack compilation
 */
class FileEmitterCollection {
  /**
   * Registers a new file emitter
   * @returns New file emitter registration
   */
  register(): FileEmitterRegistration;
  
  /**
   * Emits a specific file using registered emitters
   * @param file - File path to emit
   * @returns Promise resolving to emission result
   */
  emit(file: string): Promise<EmitFileResult | undefined>;
}

Loader Integration Example

Complete example showing how the loader integrates with the plugin:

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

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

Loader Context Integration

The loader integrates with webpack's loader context and the Angular plugin:

// The loader expects the plugin to be configured
// It communicates via the AngularPluginSymbol
import { AngularPluginSymbol } from '@ngtools/webpack';

// Plugin attaches file emitter collection to loader context
interface LoaderContextWithAngular extends LoaderContext<unknown> {
  [AngularPluginSymbol]?: FileEmitterCollection;
}

Error Handling

The loader includes comprehensive error handling:

Missing or invalid webpack version
Plugin not configured properly
File emission failures
TypeScript compilation errors

// Example basic webpack configuration
export default {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: '@ngtools/webpack',
      },
    ],
  },
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.json',
    }),
  ],
  stats: {
    errors: true,
    warnings: true,
  },
};