tessl/npm-nx--angular

Comprehensive Angular plugin for Nx workspaces providing executors, generators, and utilities for managing Angular applications and libraries.

1.09x

Overview

Eval results

Files

Executors

Name: tessl/npm-nx--angular
Rating: 0.9 (1 reviews)
Author: tessl

Executors in @nx/angular provide build, serve, and package functionality for Angular applications and libraries with support for modern bundlers and deployment targets.

Capabilities

Application Executor

Builds an Angular application using esbuild with integrated SSR and prerendering capabilities.

/**
 * Builds an Angular application using esbuild
 * @param options - Application executor options
 * @param context - Executor context
 * @returns Async iterable of build results
 */
async function* applicationExecutor(
  options: ApplicationExecutorOptions,
  context: ExecutorContext
): AsyncIterable<BuilderOutput>;

interface ApplicationExecutorOptions {
  buildTarget: string;
  outputPath: string;
  tsConfig: string;
  watch?: boolean;
  optimization?: boolean;
  aot?: boolean;
  sourceMap?: boolean;
  extractLicenses?: boolean;
  statsJson?: boolean;
  budgets?: Budget[];
  polyfills?: string | string[];
  assets?: AssetPattern[];
  styles?: StyleElement[];
  scripts?: ScriptElement[];
  prerender?: boolean;
  ssr?: boolean;
}

Usage Example:

{
  "targets": {
    "build": {
      "executor": "@nx/angular:application",
      "options": {
        "outputPath": "dist/my-app",
        "tsConfig": "tsconfig.app.json",
        "polyfills": "src/polyfills.ts"
      }
    }
  }
}

Browser ESBuild Executor

Builds an Angular application using esbuild for fast development builds.

/**
 * Builds an Angular application using esbuild
 * @param options - ESBuild executor options
 * @param context - Executor context
 * @returns Async iterable of build results
 */
async function* esbuildExecutor(
  options: EsBuildSchema,
  context: ExecutorContext
): AsyncIterable<BuilderOutput>;

interface EsBuildSchema {
  main: string;
  polyfills?: string | string[];
  tsConfig: string;
  outputPath: string;
  index: string;
  assets?: AssetPattern[];
  styles?: StyleElement[];
  scripts?: ScriptElement[];
  sourceMap?: boolean;
  optimization?: boolean;
  watch?: boolean;
}

Package Executor

Builds and packages an Angular library following the Angular Package Format (APF) for distribution as an NPM package.

/**
 * Builds and packages an Angular library
 * @param options - Package executor options
 * @param context - Executor context
 * @returns Build result
 */
function packageExecutor(
  options: PackageExecutorOptions,
  context: ExecutorContext
): Promise<BuilderOutput>;

interface PackageExecutorOptions {
  project: string;
  tsConfig: string;
  watch?: boolean;
  poll?: number;
  deleteOutputPath?: boolean;
  buildableProjectDepsInPackageJsonType?: 'dependencies' | 'peerDependencies';
  updateBuildableProjectDepsInPackageJson?: boolean;
}

Usage Example:

{
  "targets": {
    "build": {
      "executor": "@nx/angular:package",
      "options": {
        "project": "ng-package.json",
        "tsConfig": "tsconfig.lib.json"
      }
    }
  }
}

NG Packagr Lite Executor

Builds an Angular library with support for incremental builds, producing only ESM2022 bundles.

/**
 * Builds an Angular library with incremental build support
 * @param options - NG Packagr Lite executor options
 * @param context - Executor context
 * @returns Build result
 */
function ngPackagrLiteExecutor(
  options: NgPackagrLiteOptions,
  context: ExecutorContext
): Promise<BuilderOutput>;

interface NgPackagrLiteOptions {
  project: string;
  tsConfig: string;
  watch?: boolean;
}

Delegate Build Executor

Delegates the build to a different target while supporting incremental builds.

/**
 * Delegates build to another target with incremental build support
 * @param options - Delegate build executor options
 * @param context - Executor context
 * @returns Async iterable of build results
 */
async function* delegateBuildExecutor(
  options: DelegateBuildExecutorSchema,
  context: ExecutorContext
): AsyncIterable<BuilderOutput>;

interface DelegateBuildExecutorSchema {
  buildTarget: string;
  outputPath: string;
  tsConfig: string;
  watch?: boolean;
}

Extract i18n Executor

Extracts i18n messages from Angular source code for internationalization.

/**
 * Extracts i18n messages from source code
 * @param options - Extract i18n executor options
 * @param context - Executor context
 * @returns Async iterable of extraction results
 */
async function* extractI18nExecutor(
  options: ExtractI18nExecutorOptions,
  context: ExecutorContext
): AsyncIterable<BuilderOutput>;

interface ExtractI18nExecutorOptions {
  buildTarget: string;
  outputPath?: string;
  outFile?: string;
  format?: 'xmb' | 'xlf' | 'xlif' | 'xliff' | 'xlf2' | 'xliff2' | 'json';
  progress?: boolean;
}

Development Server Executors

Module Federation Dev Server

Serves host Module Federation applications allowing specification of remote applications.

/**
 * Serves Module Federation host applications
 * @param options - Module Federation dev server options
 * @param context - Executor context
 * @returns Async iterable of server results
 */
async function* moduleFederationDevServerExecutor(
  options: ModuleFederationDevServerOptions,
  context: ExecutorContext
): AsyncIterable<BuilderOutput>;

interface ModuleFederationDevServerOptions {
  buildTarget: string;
  port?: number;
  host?: string;
  ssl?: boolean;
  sslKey?: string;
  sslCert?: string;
  proxyConfig?: string;
  devRemotes?: string[];
  skipRemotes?: string[];
}

Module Federation SSR Dev Server

Reserved for host SSR Module Federation applications with remote application support.

/**
 * Serves Module Federation SSR host applications
 * @param options - Module Federation SSR dev server options
 * @param context - Executor context
 * @returns Async iterable of server results
 */
async function* moduleFederationSsrDevServerExecutor(
  options: ModuleFederationSsrDevServerOptions,
  context: ExecutorContext
): AsyncIterable<BuilderOutput>;

interface ModuleFederationSsrDevServerOptions {
  buildTarget: string;
  port?: number;
  host?: string;
  ssl?: boolean;
  devRemotes?: string[];
  skipRemotes?: string[];
}

Legacy Builders

Webpack Browser Builder

Builds an Angular application using webpack (legacy support).

/**
 * Builds an Angular application using webpack
 * @param options - Webpack browser builder options
 * @param context - Builder context
 * @returns Build result
 */
function executeWebpackBrowserBuilder(
  options: WebpackBrowserBuilderOptions,
  context: BuilderContext
): Promise<BuilderOutput>;

interface WebpackBrowserBuilderOptions {
  main: string;
  polyfills?: string | string[];
  tsConfig: string;
  outputPath: string;
  index: string;
  assets?: AssetPattern[];
  styles?: StyleElement[];
  scripts?: ScriptElement[];
  sourceMap?: boolean;
  optimization?: boolean;
  aot?: boolean;
  extractLicenses?: boolean;
  buildOptimizer?: boolean;
  namedChunks?: boolean;
  outputHashing?: 'none' | 'all' | 'media' | 'bundles';
  budgets?: Budget[];
}

Dev Server Builder

Serves an Angular application using webpack or Vite based on the build target configuration.

/**
 * Serves an Angular application
 * @param options - Dev server builder options
 * @param context - Builder context
 * @returns Server result
 */
function executeDevServerBuilder(
  options: DevServerBuilderOptions,
  context: BuilderContext
): Promise<BuilderOutput>;

interface DevServerBuilderOptions {
  buildTarget: string;
  port?: number;
  host?: string;
  proxyConfig?: string;
  ssl?: boolean;
  sslKey?: string;
  sslCert?: string;
  headers?: { [key: string]: string };
  open?: boolean;
  liveReload?: boolean;
  watch?: boolean;
  hmr?: boolean;
}

Webpack Server Builder

Builds a server Angular application using webpack for SSR scenarios.

/**
 * Builds a server Angular application using webpack
 * @param options - Webpack server builder options
 * @param context - Builder context
 * @returns Build result
 */
function executeWebpackServerBuilder(
  options: WebpackServerBuilderOptions,
  context: BuilderContext
): Promise<BuilderOutput>;

interface WebpackServerBuilderOptions {
  main: string;
  tsConfig: string;
  outputPath: string;
  optimization?: boolean;
  sourceMap?: boolean;
  bundleDependencies?: boolean;
  externalDependencies?: 'none' | 'all' | string[];
}

Types

interface AssetPattern {
  glob: string;
  input: string;
  output: string;
  ignore?: string[];
}

interface StyleElement {
  input: string;
  bundleName?: string;
  inject?: boolean;
}

interface ScriptElement {
  input: string;
  bundleName?: string;
  inject?: boolean;
}

interface Budget {
  type: 'bundle' | 'initial' | 'allScript' | 'all' | 'anyComponentStyle' | 'any';
  name?: string;
  baseline?: string;
  maximumWarning?: string;
  maximumError?: string;
  minimumWarning?: string;
  minimumError?: string;
  warning?: string;
  error?: string;
}

interface BuilderContext {
  workspaceRoot: string;
  currentDirectory: string;
  target?: Target;
  logger: Logger;
}

interface Target {
  project: string;
  target: string;
  configuration?: string;
}

Install with Tessl CLI

npx tessl i tessl/npm-nx--angular